On this page
Label (legacy)
Use Label components to add contextual metadata to a design.
- Deprecated
- Not reviewed for accessibility
On this page
Deprecation
Use the new Label instead.
Example
Props
| Name | Type | Default | Description |
|---|---|---|---|
| outline | boolean | false | Creates an outline style label |
| variant | 'small' | 'medium' | 'large' | 'xl' | 'medium' | |
| dropshadow | boolean | false | Adds a dropshadow to the label |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
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.