SectionLabel
StableA tiny capital-letter label that names a group in a list, with room for a small action.
Also known as overline, eyebrow, subheader, list subheader
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Label only
Today
<div className="w-64">
<SectionLabel>Today</SectionLabel>
</div>A plain group name above a list.
When to use it
A tiny capital-letter label that names a group of items, such as Today or Pinned. It stays quiet so the items stand out, and it has room at the end for a count or one small action.
Made of: Label · Action at the end
Use it for
- Grouping chats by date in a side list.
- Naming a section in a tray or a settings panel.
- A group name with a count or a Clear button at the end.
Not for
- A page or card title.
- A status on a single item: use Badge.
Do and avoid
Upcoming trips
Here are all the trips you booked with us over the past year
Do
- Use short words like "Pinned" or "Last 7 days". It shows in capitals by itself, so write it normally.
- Put it right above the group it names.
- Use the end of the row for one small control or a count.
- Make it a heading only when it is a real section title.
Avoid
- Do not use it as a page or card title. Use the large headings.
- Do not type labels in capitals. The style does it.
- Do not put long sentences in it.
- Do not put several actions at the end of the row.
On a phone
- The label and the action sit on one row. The label can wrap if the action takes the space.
- The label text is 12px on touch screens.
- If the action is a button, it keeps its size on a touch screen and has a 44px tap area, so the row does not get taller. A small link needs the tap class to get the same tap area.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | none | The label text. |
| action | ReactNode | none | Content aligned to the end of the row, wrapped in a muted text-small leading-4 span. |
| as | "p" | "h2" | "h3" | "h4" | "p" | Element to render. A label is plain text by default. Use a heading level only when it belongs in the page outline. |
| className | string | none | Merged onto the outer flex row. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--fg-muted
Built in
- It is plain text by default, so it does not add a heading to the page outline.
- Screen readers read the text as you typed it. The capitals are only a style.
What you need to do
- Set as to a heading level when the label should appear in the page outline, and pick the level that fits.
- Give whatever you put in action its own name, such as a button label.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide