Badge

Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.

installyarn add @adobe/react-spectrum
added3.22.0
usageimport {Badge} from '@adobe/react-spectrum'

Example#


<Badge variant="positive">Licensed</Badge>
<Badge variant="positive">Licensed</Badge>
<Badge variant="positive">
  Licensed
</Badge>
Licensed

Content#


Badges can have a label, an icon, or both. An icon is provided by passing an icon component as a child to the Badge. A visible label can be provided by passing a string or a Text component as a child, depending on whether the Badge has an accompanying icon.

import {Text} from '@adobe/react-spectrum';
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';

<Badge variant="positive">
  <CheckmarkCircle aria-label="Done" />
  <Text>Icon + Label</Text>
</Badge>
import {Text} from '@adobe/react-spectrum';
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';

<Badge variant="positive">
  <CheckmarkCircle aria-label="Done" />
  <Text>Icon + Label</Text>
</Badge>
import {Text} from '@adobe/react-spectrum';
import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';

<Badge variant="positive">
  <CheckmarkCircle aria-label="Done" />
  <Text>
    Icon + Label
  </Text>
</Badge>
Icon + Label

Accessibility#

If a visible label isn't specified, an aria-label must be provided to the icon for accessibility.

Internationalization#

To internationalize a Badge, a localized string should be set as the child content of the Badge. For languages that are read right-to-left (e.g. Hebrew and Arabic), the Badge is automatically flipped.

Props#


NameTypeDescription
childrenReactNodeThe content to display in the badge.
variant'neutral''info''positive''negative''indigo''yellow''magenta''fuchsia''purple''seafoam'

The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.

Layout
NameTypeDescription
flex<stringnumberboolean>When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN.
flexGrow<number>When used in a flex layout, specifies how the element will grow to fit the space available. See MDN.
flexShrink<number>When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN.
flexBasis<numberstring>When used in a flex layout, specifies the initial main size of the element. See MDN.
alignSelf<'auto''normal''start''end''center''flex-start''flex-end''self-start''self-end''stretch'>Overrides the alignItems property of a flex or grid container. See MDN.
justifySelf<'auto''normal''start''end''flex-start''flex-end''self-start''self-end''center''left''right''stretch'>Specifies how the element is justified inside a flex or grid container. See MDN.
order<number>The layout order for the element within a flex or grid container. See MDN.
gridArea<string>When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN.
gridColumn<string>When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN.
gridRow<string>When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN.
gridColumnStart<string>When used in a grid layout, specifies the starting column to span within the grid. See MDN.
gridColumnEnd<string>When used in a grid layout, specifies the ending column to span within the grid. See MDN.
gridRowStart<string>When used in a grid layout, specifies the starting row to span within the grid. See MDN.
gridRowEnd<string>When used in a grid layout, specifies the ending row to span within the grid. See MDN.
Spacing
NameTypeDescription
margin<>The margin for all four sides of the element. See MDN.
marginTop<>The margin for the top side of the element. See MDN.
marginBottom<>The margin for the bottom side of the element. See MDN.
marginStart<>The margin for the logical start side of the element, depending on layout direction. See MDN.
marginEnd<>The margin for the logical end side of an element, depending on layout direction. See MDN.
marginX<>The margin for both the left and right sides of the element. See MDN.
marginY<>The margin for both the top and bottom sides of the element. See MDN.
Sizing
NameTypeDescription
width<>The width of the element. See MDN.
minWidth<>The minimum width of the element. See MDN.
maxWidth<>The maximum width of the element. See MDN.
height<>The height of the element. See MDN.
minHeight<>The minimum height of the element. See MDN.
maxHeight<>The maximum height of the element. See MDN.
Positioning
NameTypeDescription
position<'static''relative''absolute''fixed''sticky'>Specifies how the element is positioned. See MDN.
top<>The top position for the element. See MDN.
bottom<>The bottom position for the element. See MDN.
left<>The left position for the element. See MDN. Consider using start instead for RTL support.
right<>The right position for the element. See MDN. Consider using start instead for RTL support.
start<>The logical start position for the element, depending on layout direction. See MDN.
end<>The logical end position for the element, depending on layout direction. See MDN.
zIndex<number>The stacking order for the element. See MDN.
isHidden<boolean>Hides the element.
Accessibility
NameTypeDescription
idstringThe element's unique identifier. See MDN.
aria-labelstringDefines a string value that labels the current element.
aria-labelledbystringIdentifies the element (or elements) that labels the current element.
aria-describedbystringIdentifies the element (or elements) that describes the object.
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.
Advanced
NameTypeDescription
UNSAFE_classNamestringSets the CSS className for the element. Only use as a last resort. Use style props instead.
UNSAFE_styleCSSPropertiesSets inline style for the element. Only use as a last resort. Use style props instead.

Visual options#


Variant#

View guidelines

When badges have a semantic meaning, they should use semantic colors. Use the appropriate color to indicate status as follows.

import {Flex} from '@adobe/react-spectrum';

<Flex direction="column" gap={8}>
  <Badge variant="positive">
    Green: Approved, Complete, Success, New, Purchased, Licensed
  </Badge>
  <Badge variant="info">Blue: Active, In Use, Live, Published</Badge>
  <Badge variant="negative">Red: Error, Alert, Rejected, Failed</Badge>
  <Badge variant="neutral">
    Gray: Archived, Deleted, Paused, Draft, Not Started, Ended
  </Badge>
</Flex>
import {Flex} from '@adobe/react-spectrum';

<Flex direction="column" gap={8}>
  <Badge variant="positive">
    Green: Approved, Complete, Success, New, Purchased,
    Licensed
  </Badge>
  <Badge variant="info">
    Blue: Active, In Use, Live, Published
  </Badge>
  <Badge variant="negative">
    Red: Error, Alert, Rejected, Failed
  </Badge>
  <Badge variant="neutral">
    Gray: Archived, Deleted, Paused, Draft, Not Started,
    Ended
  </Badge>
</Flex>
import {Flex} from '@adobe/react-spectrum';

<Flex
  direction="column"
  gap={8}
>
  <Badge variant="positive">
    Green: Approved,
    Complete, Success,
    New, Purchased,
    Licensed
  </Badge>
  <Badge variant="info">
    Blue: Active, In
    Use, Live,
    Published
  </Badge>
  <Badge variant="negative">
    Red: Error, Alert,
    Rejected, Failed
  </Badge>
  <Badge variant="neutral">
    Gray: Archived,
    Deleted, Paused,
    Draft, Not Started,
    Ended
  </Badge>
</Flex>
Green: Approved, Complete, Success, New, Purchased, LicensedBlue: Active, In Use, Live, PublishedRed: Error, Alert, Rejected, FailedGray: Archived, Deleted, Paused, Draft, Not Started, Ended

When badges are used to color code categories, they use label colors. The ideal usage for these is when there are 8 or fewer categories being color coded.

import {Flex} from '@adobe/react-spectrum';

<Flex direction="column" gap={8}>
  <Badge variant="seafoam">Seafoam</Badge>
  <Badge variant="indigo">Indigo</Badge>
  <Badge variant="purple">Purple</Badge>
  <Badge variant="fuchsia">Fuchsia</Badge>
  <Badge variant="magenta">Magenta</Badge>
  <Badge variant="yellow">Yellow</Badge>
</Flex>
import {Flex} from '@adobe/react-spectrum';

<Flex direction="column" gap={8}>
  <Badge variant="seafoam">Seafoam</Badge>
  <Badge variant="indigo">Indigo</Badge>
  <Badge variant="purple">Purple</Badge>
  <Badge variant="fuchsia">Fuchsia</Badge>
  <Badge variant="magenta">Magenta</Badge>
  <Badge variant="yellow">Yellow</Badge>
</Flex>
import {Flex} from '@adobe/react-spectrum';

<Flex
  direction="column"
  gap={8}
>
  <Badge variant="seafoam">
    Seafoam
  </Badge>
  <Badge variant="indigo">
    Indigo
  </Badge>
  <Badge variant="purple">
    Purple
  </Badge>
  <Badge variant="fuchsia">
    Fuchsia
  </Badge>
  <Badge variant="magenta">
    Magenta
  </Badge>
  <Badge variant="yellow">
    Yellow
  </Badge>
</Flex>
SeafoamIndigoPurpleFuchsiaMagentaYellow