SectionLabel
A small uppercase label for introducing a section of content, with an optional trailing action. Two variants: bare (just the label) and divided (adds a hairline rule beneath).
$npx shadcn add @patchui/section-label
Overview
A small uppercase label for grouping content under a heading.
Recent activityView all
The divided variant adds a hairline rule and an optional trailing action.
Usage
import { SectionLabel } from "@patchui/react";
<SectionLabel>Overview</SectionLabel>
<SectionLabel variant="divided" action="View all">
Recent activity
</SectionLabel>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "bare" | "divided" | "bare" | bare is just the label; divided adds a hairline rule and more bottom spacing. |
| action | ReactNode | - | Optional trailing content (e.g. a link), rendered in normal case to the right of the label. |
| render | RenderProp<'div'> | - | Polymorphic render prop to change the rendered element while keeping the label styling. |
| className | string | - | Additional CSS classes applied to the label. |
Notes
- Pairing: Use above lists, cards, or form groups to label a region without the weight of a full heading.
- Action: The
actionslot is right-aligned and rendered in normal case, ideal for a "View all" link or count.