Label

Examples

Basic

render(<Label>Default</Label>)

Variants

render(
  <>
    <Label>Default</Label>
    <Label variant="primary">Primary</Label>
    <Label variant="secondary">Secondary</Label>
    <Label variant="accent">Accent</Label>
    <Label variant="success">Success</Label>
    <Label variant="attention">Attention</Label>
    <Label variant="severe">Severe</Label>
    <Label variant="danger">Danger</Label>
    <Label variant="done">Done</Label>
    <Label variant="sponsors">Sponsors</Label>
  </>,
)

Sizes

render(
  <>
    <Label>Small (default)</Label>
    <Label size="large">Large</Label>
  </>,
)

Props

Label

| 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors'

'small' | 'large'

Status

Alpha

• Component props and basic example usage of the component are documented on primer.style/react.
• Component does not have any unnecessary third-party dependencies.
• Component can adapt to different themes.
• Component can adapt to different screen sizes.
• Component has robust unit test coverage (100% where achievable).
• Component has visual regression coverage of its default and interactive states.
• Component does not introduce any axe violations.
• Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

• Component is used in a production application.
• Common usage examples are documented on primer.style/react.
• Common usage examples are documented in storybook stories.
• Component has been reviewed by a systems designer and any resulting issues have been addressed.
• Component does not introduce any performance regressions.

Stable

• Component API has been stable with no breaking changes for at least one month.
• Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
• Component has corresponding design guidelines documented in the interface guidelines.
• Component has corresponding Figma component in the Primer Web library.
• Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.