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

classDescription
badgeBadge base class
badge-squareSet square shape
badge-primarySet secondary color
badge-secondarySet secondary color
badge-successSet success color
badge-errorSet error color
badge-warningSet warning color
badge-outline-primarySet transparent background with border primary
badge-outline-secondarySet transparent background with border secondary
badge-outline-successSet transparent background with border success
badge-outline-errorSet transparent background with border error
badge-outline-warningSet transparent background with border warning
badge-flat-primarySet low blue background and strong blue text color
badge-flat-secondarySet low purple background and strong purple text color
badge-flat-successSet low green background and strong green text color
badge-flat-warningSet low yellow background and strong yellow text color
badge-flat-errorSet low red background and strong red text color
badge-xsSet extra small size
badge-smSet small size
badge-mdSet medium size
badge-lgSet large size
badge-xlSet extra large size