104Get started
HextaUI

Marker: Long content

Notes wrap and unbroken strings break instead of widening the layout. Separator lines keep a minimum length on both sides.

Messages older than 90 days were archived to [email protected]
A separator label that is long enough to wrap onto two lines
import { IconAlertTriangle } from "@tabler/icons-react"

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

export function MarkerLongContent() {
  return (
    <div className="flex w-72 max-w-full flex-col gap-6">
      <Marker>
        <MarkerIcon>
          <IconAlertTriangle className="text-warning" />
        </MarkerIcon>
        <MarkerContent>
          Messages older than 90 days were archived to
          [email protected]
        </MarkerContent>
      </Marker>
      <Marker variant="separator">
        <MarkerContent>
          A separator label that is long enough to wrap onto two lines
        </MarkerContent>
      </Marker>
    </div>
  )
}

Add this example

This adds the example as components/examples/marker/long-content.tsx, together with the Marker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/marker-long-content.json

To add only the component, follow the Marker installation.

Props in this example

The Marker props this example sets, from the API reference.

Marker

PropTypeDefault
variant
"default" | "separator" | "border""default"

Every prop is in the Marker API reference.

More Marker examples

See them all, with keyboard support and accessibility notes, on the Marker page.

Related components