Label (legacy)

Deprecation

Use the new Label instead.

Example

<>
  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
    small
  </Label>
  <Label variant="medium" sx={{mr: 2}}>
    medium (default)
  </Label>
  <Label variant="large" sx={{mr: 2}}>
    large
  </Label>
  <Label variant="xl">xl label</Label>

  <Box mt={4} />
  <Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
    good first issue
  </Label>
  <Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
    🚂 deploy: train
  </Label>
  <Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
    css
  </Label>
  <Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
    documentation
  </Label>
  <Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
    primer
  </Label>
</>

Props

boolean

'small' | 'medium' | 'large' | 'xl'

boolean

SystemStyleObject

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.