Section Label

Install

Pull Section Label from the barrel for everyday use, or the granular path when you want a tighter bundle.

import { SectionLabel } from "@brika/clay";

import { SectionLabel } from "@brika/clay/components/section-label";

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

import { SectionLabel } from '@brika/clay/components/section-label';

/** Simple uppercase group divider above a list of cards. */
export default function SectionLabelDefaultDemo() {
  return <SectionLabel>Recent activity</SectionLabel>;
}

Section Label, every way

import { SectionLabel } from '@brika/clay/components/section-label';
import { AlertTriangle, CheckCircle, Info, Zap } from 'lucide-react';

/** Semantic tones map to status colors, `destructive`, `warning`, `success`, `info`. */
export default function SectionLabelTonesDemo() {
  return (
    <div className="flex flex-col gap-3">
      <SectionLabel tone="destructive" icon={AlertTriangle}>
        2 errors
      </SectionLabel>
      <SectionLabel tone="warning" icon={Zap}>
        1 needs attention
      </SectionLabel>
      <SectionLabel tone="success" icon={CheckCircle}>
        All checks passed
      </SectionLabel>
      <SectionLabel tone="info" icon={Info}>
        3 pending review
      </SectionLabel>
    </div>
  );
}

import { SectionLabel } from '@brika/clay/components/section-label';

/** Inline count makes quantities scannable at a glance. */
export default function SectionLabelWithCountDemo() {
  return (
    <div className="flex flex-col gap-3">
      <SectionLabel>Pipelines (12)</SectionLabel>
      <SectionLabel>Services (4)</SectionLabel>
    </div>
  );
}

Accessibility

• › Renders as <p> by default, use as="h3" when it semantically introduces a group.
• › Tone colors are visual only; pair with an icon that has a meaningful aria-label when tone conveys status.

Theme tokens

Every CSS variable Section Label reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Section Label without touching component code.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.sectionLabel, the names are camelCase versions of the variable suffix.

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "sectionLabel": {
      "color": "var(--muted-foreground)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-section-label-…) — see the chips on each token row.

API reference

Props specific to Section Label. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.