Label

Short text badge used to indicate status, category or metadata. The background and text colors come from the theme's semantic palette.

When to use

✅ Use when…	🚫 Avoid when…
To signal the state of an entity ("New", "Pending", "Approved"). As a category tag in cards and lists. In forms, next to fields, to indicate requiredness or error.	As an action button. Use `Button`. For headings or running text. Use `Text`. As a numeric counter in notification badges — `Label` is compact text, not a circular avatar.

Variants

defaultinfosuccesswarningdanger

<Label text="default" />
<Label variant="info" text="info" />
<Label variant="success" text="success" />
<Label variant="warning" text="warning" />
<Label variant="danger" text="danger" />

Inverted (`inverted`)

On dark or photographic surfaces the default light background disappears. inverted swaps the pair: strong background (action) and ink derived via getContrastColor — legible, AA by construction, in any theme. This is the per-element inversion; to invert an entire subtree, use surface on the container (surface inversion).

defaultinfosuccesswarningdanger

<Paper bgColor="neutral.170" p="small" deep={0}>
  <Label inverted variant="success" text="V" />
</Paper>

Interactive Demo

Properties


Prop	Type	Default	Description
`alignContent`	`"center" \| "start" \| "end" \| "between" \| "around" \| "evenly" \| "stretch"`	—	Packing of wrapped lines / grid tracks on the block axis.
`as`	`ElementType`	—	Overrides the HTML tag resolved by the `variant` — the look of one, the semantics of another. Also defines which HTML attributes apply. @example ```tsx <Text variant="h1" as="h2">Visually h1, semantically h2</Text> ```
`children`	`ReactNode`	—	Badge content via children. Takes precedence over `text`.
`color`	`string`	—	Theme token (`theme.colors`) used as `color`. Has lower precedence than `contrast`: when both are provided, the contrast calculation wins. Stays `string` (not the typed union): `color` is also an HTML attribute (`<li color>`, etc.) and interfaces extending native props require identical types on the name collision.
`containment`	`string`	—	Containment marker for the `cq` channel: emits `container-type` (+ `container-name` when the string form carries one, e.g. `'inline-size card'`). Apply on the immediate wrapper of the adapting component — NEVER on page-level shells.
`cq`	`Partial<Record<ContainerSizeTypes, ContainerQueryable>>`	—	Container-relative styles per `theme.containerSizes` key.
`enableBreakpoint`	`"xs" \| "xl" \| "sm" \| "md" \| "lg"`	—	Forces a prop set to apply as if the given breakpoint were active, regardless of the actual viewport size. Useful for stories/storyshots or controlled previews.
`htmlFor`	`string`	—	Forwarded to `htmlFor` when the final tag is a `<label>` (via `as="label"`). Declared here — and not only via `as="label"` — to keep the prop available when `Text` is used without a literal `as` (e.g. `Partial<TextInterface>` in `labelProps`).
`ignoreResponsive`	`boolean`	—	When `true`, fully disables the responsive factory (useful in tests or in components that want to show a single fixed snapshot).
`inverted`	`boolean`	`false`	Strong-background variant of the badge: fill goes to the palette's `action` tone, ink derives by contrast (AA in any theme). For dark or photographic surfaces.
`justifyItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: inline alignment of every item in its cell.
`legibility`	`"on-photo"`	—	Reading-shadow preset for text over a photographic background (`on-photo`). Replaces the inline `style={{ textShadow }}` in the consumer (brasil_2030 radar, gap A3). Token emission is deferred until a 2nd consumer asks for the raw var (see backlog).
`motion`	`"none" \| "fade" \| "scale" \| "slide-up" \| "slide-down" \| "slide-left" \| "slide-right" \| "collapse" \| "sheet" \| "sheet-top" \| "drawer-left" \| "drawer-right"`	—	Semantic motion preset. Enter animates on mount via `@starting-style`; exit expects the `data-state="closing"` attribute (see `useExitTransition`). Durations/easings resolve from the `--apollion-motion-*` vars with the theme literal as fallback, so `prefers-reduced-motion` zeroes them centrally. @example ```tsx <Flex motion="slide-up">Toast body</Flex> ```
`pageShell`	`boolean`	—	Centers the element and caps the width at `theme.layout.pageMaxWidth`. The page shell of a classic centered layout.
`placeItems`	`"center" \| "start" \| "end" \| "stretch"`	—	Grid containers: `place-items` shorthand (block + inline).
`readable`	`number \| boolean`	—	Makes the `color` legible against the page surface: `true` = WCAG AA (4.5), a number sets a custom floor. Ignored with `contrast`. See the Layout Props concept page for the full semantics.
`text`	`string`	—	Badge content as a string.
`tick`	`number`	—	Live value driving a tick flash. When it changes, the glyph color snaps to `success` (went up) or `danger` (went down) and then eases back to the idle ink over `theme.animation.transitions.settle`. Only the color moves — layout is untouched. Leave it unset for static text. @example ```tsx <Text tick={lastPrice} text={formatted} /> ```
`transform`	`string`	—	CSS `transform` value (e.g. `translate(-50%, -33px)`). Never leaks to the DOM as an attribute.
`type`	`"auto" \| "mobile" \| "desktop"`	`'auto'`	Responsive mode (see {@link TextType}). Use `'auto'` in most cases.
`variant`	`"default" \| "info" \| "success" \| "warning" \| "danger"`	`'default'`	Semantic color of the badge. Each value maps to a theme palette (`light` for the background, `action` for the text).
`viewportMedias`	`Partial<Record<keyof BreakPoint<any>, ContainerQueryable>>`	—	Viewport-driven styles per `theme.breakpoints` key, object grammar — the viewport sibling of `cq` (see {@link ViewportMediaStyles}).

Besides the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.