Badge

View source on GitHub

Badge is a label that indicates status or importance. Badges should provide quick recognition.

also known as Lozenge, Label, Stamp, Flag

Figma:

Web:

iOS:

Android:

A11y:

<Text>Update your pronouns in your profile settings <Badge text="New" /></Text>

<Text>Update your pronouns in your profile settings <Badge text="New" /></Text>

Props

Component props
Name	Type	Default
`text` Required	`string`	-
	Text displayed inside of the Badge. Sentence case is preferred.
`position`	`"middle" \| "top"`	`"middle"`
	Badge position relative to its parent element. See the positioning variant to learn more.
`type`	`"info" \| "error" \| "warning" \| "success" \| "neutral" \| "recommendation" \| "darkWash" \| "lightWash"`	`"info"`
	Determines the style of the badge. See the type variant to learn more.

Usage guidelines

When to use

Labeling and bringing awareness to a specific element or feature (e.g., something is new or required).

When not to use

Providing feedback at the element level (e.g., displaying error messages). Use inline text instead.
Requiring interaction from users since Badges are always static and non-interactive.

Best practices

Align the badge to the top of large accompanying text (anything larger than 16px). Center align for standard size text.

Don't

Use colored badges over media. Instead use the dark or light wash.

Use established color patterns so users can quickly scan and identify sentiment. However, the badge text should always clearly indicate the sentiment, so color is not the sole indicator of information.

Don't

Use complex or verbose language. Instead use a single, scannable word. For example: 'New'.

Accessibility

Ready

The badge text is read out by assistive technologies like screen readers so all users can access the meaning of the badge in context. Text should demonstrate the sentiment clearly enough to be understood immediately without relying on color alone.

Localization

Be sure to localize the text prop. Note that localization can lengthen text by 20 to 30 percent.

Variants

Type

Badge is available in five styles. Each type represents a messaging sentiment.

Info (default)
Communicates helpful information or an important attribute. For example, 'New' or 'Help'.
Success
Indicates a constructive or successful state. For example, 'Available', 'Completed', 'Approved' or 'Added'.
Warning
Communicates cautionary or time-sensitive information to the user. For example, 'Busy', 'Missing' or 'Warning'.
Error
Informs the user of problems or errors that require potential action to correct. For example, 'Deleted' or 'Cancelled'.
Neutral
Indicates a general, non-critical status update. For example, 'Unavailable' or 'Not started'.
Recommendation
Highlights a suggestion that will improve the experience and achieve better results. For example, 'Recommended for you'.

<Table accessibilityLabel="Type examples">
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Type</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Example</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Text>Info</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="New" type="info"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Success</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Completed" type="success"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Warning</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Needs attention" type="warning"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Error</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Failed" type="error"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Neutral</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Not started" type="neutral"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Recommendation</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Recommended for you" type="recommendation"/></Text>
        </Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>

<Table accessibilityLabel="Type examples">
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>
          <Text weight="bold">Type</Text>
        </Table.HeaderCell>
        <Table.HeaderCell>
          <Text weight="bold">Example</Text>
        </Table.HeaderCell>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Text>Info</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="New" type="info"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Success</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Completed" type="success"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Warning</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Needs attention" type="warning"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Error</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Failed" type="error"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Neutral</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Not started" type="neutral"/></Text>
        </Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>
          <Text>Recommendation</Text>
        </Table.Cell>
        <Table.Cell>
          <Text size="300">Ads & Campaigns <Badge text="Recommended for you" type="recommendation"/></Text>
        </Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>

Over media

Badge may be used over media using two wash styles.

Over media - Light wash
The light wash badge should be used over media that is dark or utilizes a dark gradient overlay.
Over media - Dark wash
The dark wash badge should be used over media that is light or utilizes a light gradient overlay.

<Flex gap={{ column: 8, row: 4 }} wrap>
  <Mask height={150} width={280} rounding={2}>
    <Image alt="Botanical art in coral and green" fit="cover" src="https://i.ibb.co/cbjgZft/img-door.jpg" naturalWidth={1} naturalHeight={1}>
      <Box padding={4}>
        <Badge text="Light wash" type="lightWash"/>
      </Box>
    </Image>

  </Mask>
  <Mask height={150} width={280} rounding={2}>
    <Image alt="Botanical art in coral and green" fit="cover" src="https://i.ibb.co/7bQQYkX/stock2.jpg" naturalWidth={1} naturalHeight={1}>
      <Box padding={4}>
        <Badge text="Dark wash" type="darkWash"/>
      </Box>
    </Image>
  </Mask>
</Flex>

<Flex gap={{ column: 8, row: 4 }} wrap>
  <Mask height={150} width={280} rounding={2}>
    <Image alt="Botanical art in coral and green" fit="cover" src="https://i.ibb.co/cbjgZft/img-door.jpg" naturalWidth={1} naturalHeight={1}>
      <Box padding={4}>
        <Badge text="Light wash" type="lightWash"/>
      </Box>
    </Image>

  </Mask>
  <Mask height={150} width={280} rounding={2}>
    <Image alt="Botanical art in coral and green" fit="cover" src="https://i.ibb.co/7bQQYkX/stock2.jpg" naturalWidth={1} naturalHeight={1}>
      <Box padding={4}>
        <Badge text="Dark wash" type="darkWash"/>
      </Box>
    </Image>
  </Mask>
</Flex>

Positioning

By default, Badge is rendered inline within the parent element. However, the position prop can be used to adjust the alignment. Badges should align to the top of large accompanying text.

<Flex gap={{ column: 4, row: 0 }} direction="column">
  <Text size="300">Ads & Campaigns <Badge text="New" /></Text>
  <Text size="600">Ads & Campaigns <Badge text="Beta" position="top"/></Text>
</Flex>

<Flex gap={{ column: 4, row: 0 }} direction="column">
  <Text size="300">Ads & Campaigns <Badge text="New" /></Text>
  <Text size="600">Ads & Campaigns <Badge text="Beta" position="top"/></Text>
</Flex>

Within other components

Components like Module and Dropdown have Badges built into the component through props, so it will not be necessary to add the component yourself.

function ModuleExample() {
  return (
    <Box column={12} maxWidth={800} padding={2}>
      <Module
        badge={{ text: 'Beta' }}
        id="ModuleExample - badge"
        title="Title"
        >
        <Text size="200">This is example content.</Text>
      </Module>
    </Box>
  );
}

function ModuleExample() {
  return (
    <Box column={12} maxWidth={800} padding={2}>
      <Module
        badge={{ text: 'Beta' }}
        id="ModuleExample - badge"
        title="Title"
        >
        <Text size="200">This is example content.</Text>
      </Module>
    </Box>
  );
}

Writing

Use a single word to describe the status of an element. For example, “New” not “New post.”
Where applicable, describe the status in past tense. For example, “Archived” not “Archive.”

Don't

Use conflicting language with defined type sentiments. For example, the error badge should not say “Complete.”

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Partially ready	Component is live in Figma, however may not be available for all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Status
Status is a graphic indicator of an element’s state.

Tooltip
Tooltip is a floating text label that succinctly describes the function of an interactive element.

Edit page on GitHub

Badge

Props

Usage guidelines

Best practices

Accessibility

Localization

Variants

Type

Over media

Positioning

Within other components

Writing

Component quality checklist

Related