Badge
ExperimentalShow a short piece of descriptive metadata.
Example
DraftInternal
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Badge } from 'panel-ui-kit/badge'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <Badge>Draft</Badge> <Badge variant="outline">Internal</Badge> </PanelUiTheme> );}When to use
Keep labels concise and meaningful. Badge does not create a button, live announcement or business status.
Keyboard
No tab stop or interaction.
Properties
| Property | Values | Default |
|---|---|---|
variant | default · outline | default |
children | Application content | — |
motion | full · reduced · off · object | Inherited |