This component does not have editable controls yet.
Typography
SectionLabel
A chunky rotated heading label for editorial section markers, callouts and page breaks.
Component
11
Import
import { SectionLabel } from "@swirski/ui";Playground
Usage
<SectionLabel tone="yellow">Featured</SectionLabel>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
asChild | boolean | false | Renders the child as the root element. |
children | ReactNode | - | Label text. |
size | 'sm' | 'md' | 'lg' | "md" | Applies the label padding and heading scale. |
tone | 'blue' | 'yellow' | 'red' | 'white' | "yellow" | Applies the label color treatment. |
variant | 'default' | 'flat' | "default" | Toggles the offset shadow treatment. |
...headingProps | HTMLAttributes<HTMLHeadingElement> | - | Forwarded to the rendered heading. |