Badge

Badge is used to label 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.

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.

Example

The Badge component is rendered inline within parent element.

<Text>Some text that uses Badge component as its child <Badge text="New" /></Text>

<Text>Some text that uses Badge component as its child <Badge text="New" /></Text>

Example: positioning

Larger text example rendered with a top positioned Badge.

<Heading>Heading <Badge text="Beta" position="top"/></Heading>

<Heading>Heading <Badge text="Beta" position="top"/></Heading>

Example: within other components

Components like Module and Dropdown support Badges within the component.

function ModuleExample() {
  return (
    <Box column={12} maxWidth={800} padding={2}>
      <Module
        badgeText="Try it out!"
        id="ModuleExample - badge"
        title="Title"
        >
        <Text size="md">This is example content.</Text>
      </Module>
    </Box>
  );
}

function ModuleExample() {
  return (
    <Box column={12} maxWidth={800} padding={2}>
      <Module
        badgeText="Try it out!"
        id="ModuleExample - badge"
        title="Title"
        >
        <Text size="md">This is example content.</Text>
      </Module>
    </Box>
  );
}

Edit page on GitHub