Label is the smallest role in the type scale — used for
component labels (buttons, tabs, chips) or very small text like captions. It renders a <p>.
Label is one of five components — alongside Display, Headline, Title, and Body — implementing
the Material Design 3 type scale. They share the same prop shape (size, emphasized) and differ only in typescale role and element
tag.
Most interactive components in this library (buttons, tabs, chips) apply their own label
typescale classes internally, so you'll typically reach for Label directly only for standalone captions or custom controls.
import { Label } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Size and emphasized Controls.
<script lang="ts">
import { Label } from '@noxlovette/material';
</script>
<Label size="small">Caption text</Label> | Prop | Type | Default | Description |
|---|---|---|---|
children required | Snippet | — | The text content, rendered inside a <p>. |
size | "small" | "medium" | "large" | "medium" | Selects the M3 type-scale token, e.g. md-sys-typescale-label-large. |
emphasized | boolean | false | Bumps the font weight to semibold for extra emphasis. |
class | string | — | Additional classes merged onto the root element, e.g. a color-role utility. |
Small text, real contrast
At label sizes, contrast matters more, not less — always pair with an on-* color-role utility rather than a low-opacity color.
Not a heading
Renders as a plain <p> — never use it as a substitute for a real heading level.