aura
Home Aura
aura

Badge

The badge component is used to display a small amount of information to the user. It is often used to display a count of items, such as unread messages or notifications.

Attributes

  • text (String): The text to display in the badge.
  • variant (String): The variant of the badge. Possible values are:
    • primary, secondary, success, info, warning, danger, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
  • type (String): The type of the badge. Possible values are:
    • solid, outline, ghost
  • size (String): The size of the badge. Possible values are:
    • sm, md, lg
  • pill (Boolean): If present, the badge will be displayed as a pill.
  • icon-start (String): The name of the icon to display at the start of the badge.
  • icon (String): The name of the icon to display in the badge.
  • i-success (Boolean): If present, the badge will display a success indicator.
  • i-info (Boolean): If present, the badge will display an info indicator.
  • i-warning (Boolean): If present, the badge will display a warning indicator.
  • i-danger (Boolean): If present, the badge will display a danger indicator.
  • indicator (String): The type of indicator to display. Possible values are:
    • success, info, warning, danger

Basic Usage

Hello World

Copy to clipboard

<aura:badge text="Hello World" />
<aura:badge>Hello World</aura:badge>

Variants

The badge component has a number of variants that can be used to change the appearance of the badge.

primary
secondary
success
info
warning
danger
gray
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Copy to clipboard

<aura:badge primary />
<aura:badge secondary />
<aura:badge success />
<aura:badge info />
<aura:badge warning />
<aura:badge danger />
<aura:badge gray />
<aura:badge red />
<aura:badge orange />
<aura:badge amber />
<aura:badge yellow />
<aura:badge lime />
<aura:badge green />
<aura:badge emerald />
<aura:badge teal />
<aura:badge cyan />
<aura:badge sky />
<aura:badge blue />
<aura:badge indigo />
<aura:badge violet />
<aura:badge purple />
<aura:badge fuchsia />
<aura:badge pink />
<aura:badge rose />

Types

The badge component has a number of types that can be used to change the appearance of the badge. Default type is solid.

Solid
Outline
Ghost

Copy to clipboard

<aura:badge solid ... />
<aura:badge outline ... />
<aura:badge ghost ... />

Sizes

The badge component has a number of sizes that can be used to change the appearance of the badge. Default size is medium.

Small
Medium
Large

Copy to clipboard

<aura:badge sm ... />
<aura:badge md ... />
<aura:badge lg ... />

Pill

The badge component can be displayed as a pill.

Pill

Copy to clipboard

<aura:badge pill ... />

Icon

The badge component can also display an icon.

Icon
Icon

Copy to clipboard

<aura:badge icon-start="tag" ... />
<aura:badge icon="tag" ... />

Indicators

The badge component can display indicators for different types by using the i- prefix. with the types success, info, warning, and danger.

alternatively, you can use indicator attribute with the value of the type.

Success
Danger
Warning
Info
Success

Copy to clipboard

<aura:badge i-success ... />
<aura:badge i-info ... />
<aura:badge i-warning ... />
<aura:badge i-danger ... />
<aura:badge indicator="success" ... />