A 40 degree tick and a short label: the system's section opener, and one of its marks of authorship.
Not an eyebrow. Never all-caps, and never used to label a control - it opens a stretch of content.
as="heading" exists because the mark is often the only thing announcing a section. Without it the element is a div and a screen reader walking the headings skips the section entirely; with it the mark carries an explicit level instead of guessing from the visual size.
import { SectionMark } from '@redrob-labs/ui';| Prop | Type | Notes |
|---|---|---|
label |
React.ReactNode | React.ReactNode[] |
The label. An array is joined with a middle dot, for a breadcrumb-ish pair like section ยท date. |
as |
'div' | 'heading' |
heading makes it a real heading for assistive tech. Use it when it opens a section. |
level |
number |
Heading level when as="heading". Defaults to 2. |
tone |
'default' | 'muted' |
muted dims the tick where the mark is one of many in a dense list. |
trailing |
React.ReactNode |
Right-aligned aside: a count, a date. Never a second label. |
className |
string |