Marker
A small label for annotating content, such as a section divider, an inline note, or an "OR" separator between actions.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Replaced text-left with text-start
- Replaced physical before:mr-1/after:ml-1 with logical before:me-1/after:ms-1 on the separator variant
Overview
Installation
Usage
import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"
export function Example() {
return (
<Marker>
<MarkerIcon>
<Icon />
</MarkerIcon>
<MarkerContent>Requires a Pro plan</MarkerContent>
</Marker>
)
}Examples
Separator
The separator variant draws a rule on each side of the content, e.g. between two alternate actions.
Border
RTL
The separator's rules on either side of "یا" mirror correctly under RTL.