Badge

The Badge component helps to label text.

Update your pronouns in your profile settings New

Props

Component props
Name	Type	Default
`text` Required	`string`	-
	Text displayed inside of the Badge. Sentence case is best.
`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.

Some text that uses Badge component as its child New

<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 Beta

<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.

Title

Try it out!

This is example content.

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