Badge#

Ripple UI comes with a set of predefined badges that can be used to highlight important information.

Default#

Simple example of a badge.

Default

HTML

JSX

<span class="badge">Default</span>

Square#

Badge with square shape.

Default

HTML

JSX

<span class="badge badge-square">Default</span>

Colors#

Badge with different colors.

Primary Secondary Success Danger Warning

HTML

JSX

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-error">Danger</span>
<span class="badge badge-warning">Warning</span>

Flat#

Flat variant.

Primary Secondary Success Danger Warning

HTML

JSX

<span class="badge badge-flat-primary">Primary</span>
<span class="badge badge-flat-secondary">Secondary</span>
<span class="badge badge-flat-success">Success</span>
<span class="badge badge-flat-error">Danger</span>
<span class="badge badge-flat-warning">Warning</span>

Outline#

Badge with outline.

Default Default Default Default Default

HTML

JSX

<span class="badge badge-outline-primary">Default</span>
<span class="badge badge-outline-secondary">Default</span>
<span class="badge badge-outline-success">Default</span>
<span class="badge badge-outline-warning">Default</span>
<span class="badge badge-outline-error">Default</span>

Sizes#

Badge with different sizes.

Default Default Default Default Default

HTML

JSX

<span class="badge badge-xs">Default</span>
<span class="badge badge-sm">Default</span>
<span class="badge badge-md">Default</span>
<span class="badge badge-lg">Default</span>
<span class="badge badge-xl">Default</span>

API#

`Badge Classes`

class	Description
badge	Badge base class
badge-square	Set square shape
badge-primary	Set secondary color
badge-secondary	Set secondary color
badge-success	Set success color
badge-error	Set error color
badge-warning	Set warning color
badge-outline-primary	Set transparent background with border primary
badge-outline-secondary	Set transparent background with border secondary
badge-outline-success	Set transparent background with border success
badge-outline-error	Set transparent background with border error
badge-outline-warning	Set transparent background with border warning
badge-flat-primary	Set low blue background and strong blue text color
badge-flat-secondary	Set low purple background and strong purple text color
badge-flat-success	Set low green background and strong green text color
badge-flat-warning	Set low yellow background and strong yellow text color
badge-flat-error	Set low red background and strong red text color
badge-xs	Set extra small size
badge-sm	Set small size
badge-md	Set medium size
badge-lg	Set large size
badge-xl	Set extra large size

Avatar Breadcrumb

Edit this page on GitHub