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 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 100% test coverage.

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 has been manually reviewed by the accessibility team and any resulting issues have been addressed.

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.

Edit this page on GitHub

3 contributors

Last edited by broccolinisoup on August 25, 2022