Alder Row, Riverside
A sentence-case eyebrow with a short rule in front of it. The rule draws from the left and the text rises in behind it, on scroll by default or at once for heroes. Both take the current text color, so one class puts it on a photograph.
The import and the props worth knowing about, in one place.
import { Badge24 } from "@/components/beste/component/badge24";
<Badge24 text="Alder Row, Riverside" />
<Badge24
text="The residences"
as="span" // "p" (default) | "span" | "div"
trigger="mount" // "view" (default) | "mount" | "none"
delay={0.2} // seconds before the rule draws
className="text-background/80" // color for dark or photographic surfaces
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | The eyebrow text, in sentence case |
as | "p" | "span" | "div" | — | Element to render |
trigger | "view" | "mount" | "none" | — | Play when scrolled into view (default), at once for heroes, or not at all |
delay | number | — | Seconds before the rule starts drawing |
className | string | — | Additional classes merged onto the element (set the text color here for dark or photographic surfaces) |