Density

Label

Label renders compact UI text with Density typography. Use it for app UI text, Stat for numeric values, and Content for long-form copy.

Build complete
import { Label } from "density-base-ui";

export default function LabelExample() {
  return <Label>Build complete</Label>;
}

size and emphasis inherit from the nearest Density scope. Set either prop to override its scope for this Label.

As

Set as when the text needs a semantic HTML element, such as a heading.

Recent activity

import { Label } from "density-base-ui";

export default function LabelAsExample() {
  return <Label as="h2">Recent activity</Label>;
}

Emphasis

Primary labelSecondary labelGhost secondary labelGhost tertiary label
import { Label, View } from "density-base-ui";

export default function LabelEmphasisExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Label emphasis="primary">Primary label</Label>
      <Label emphasis="secondary">Secondary label</Label>
      <Label emphasis="ghost-secondary">Ghost secondary label</Label>
      <Label emphasis="ghost-tertiary">Ghost tertiary label</Label>
    </View>
  );
}

Hover visibility

Inside a reveal host such as ListItem, set hoverVisibility="hover" to show a Label while its host is hovered or contains keyboard focus. Use not-hover for the inverse; always is the default.

Release notesEdited just now
import { Label, ListItem, View } from "density-base-ui";

export default function LabelHoverVisibilityExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        as="div"
        title="Release notes"
        childrenEnd={<Label hoverVisibility="hover">Edited just now</Label>}
      />
    </View>
  );
}

Size

2xs labelxs labelsm labelmd labellg labelxl label2xl label3xl label
import { Label, View } from "density-base-ui";

export default function LabelSizeExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Label size="2xs">2xs label</Label>
      <Label size="xs">xs label</Label>
      <Label size="sm">sm label</Label>
      <Label size="md">md label</Label>
      <Label size="lg">lg label</Label>
      <Label size="xl">xl label</Label>
      <Label size="2xl">2xl label</Label>
      <Label size="3xl">3xl label</Label>
    </View>
  );
}

Title

Set title to use the size-aware title weight and line height.

Regular labelTitle label
import { Label, View } from "density-base-ui";

export default function LabelTitleExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Label>Regular label</Label>
      <Label title>Title label</Label>
    </View>
  );
}