changeset-release/main deployment.Badge
Summary
Small tags, usually right under the page title.
<Badge href="https://drei.pmnd.rs/?path=/story/abstractions-positionalaudio--positional-audio-scene-st">storybook</Badge>
<Badge href="https://r3f.docs.pmnd.rs/api/hooks#useloader">suspense</Badge>
<Badge>Dom only</Badge>
result:
A badge is inline, like a link: badges on consecutive lines make one row, and a badge sits in a sentence too, as in "works with suspense".
color takes a color role of the theme: primary, secondary, tertiary, error, or one of the custom colors note, tip, important, warning, caution; or a brand color, storybook, npm, chromatic, shown as is, with white text, in light and dark alike (see THEME_* in configuration):
<Badge color="primary">primary</Badge>
<Badge color="secondary">secondary</Badge>
<Badge color="tertiary">tertiary</Badge>
<Badge color="error">error</Badge>
<Badge color="note">note</Badge>
<Badge color="tip">tip</Badge>
<Badge color="important">important</Badge>
<Badge color="warning">warning</Badge>
<Badge color="caution">caution</Badge>
<Badge color="storybook" logo="storybook">storybook</Badge>
<Badge color="npm" logo="npm">npm</Badge>
<Badge color="chromatic" logo="chromatic">chromatic</Badge>
<Badge color="tip" href="https://r3f.docs.pmnd.rs/api/hooks#useloader">suspense</Badge>
result:
primary secondary tertiary error note tip important warning caution storybook npm chromatic suspense
label adds a de-emphasized label before the text, and logo a brand logo, by its simple-icons slug — for now storybook, chromatic, discord, github or npm; any other shows none:
<Badge href="https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei" label="GitHub" logo="github">Open in Codespaces</Badge>
result:
A shields.io image is an image like any other: it is not turned into a Badge. For a badge that follows the theme, write <Badge>.