# Separator: Align

> `align` moves the label to the `start` or `end`, which suits section and date headers. Icons are sized to the text.

Example: https://hextaui.com/docs/separator/examples/align
Component docs: https://hextaui.com/docs/separator.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/separator-align.json
```

This adds `components/examples/separator/align.tsx` with the Separator component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/separator/align.tsx"
import { IconCalendar } from "@tabler/icons-react"

import { Separator } from "@/components/ui/separator"

export function SeparatorAlign() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Separator align="start">
        <IconCalendar aria-hidden="true" />
        Today
      </Separator>
      <Separator>Yesterday</Separator>
      <Separator align="end">Last week</Separator>
    </div>
  )
}
```

## Props in this example

### Separator

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | `"center"` | Where the label sits along the line. |

## More Separator examples

- [Vertical](https://hextaui.com/docs/separator/examples/vertical.md)
- [Label](https://hextaui.com/docs/separator/examples/label.md)
- [Vertical label](https://hextaui.com/docs/separator/examples/vertical-label.md)
- [Decorative](https://hextaui.com/docs/separator/examples/decorative.md)
- [Inline](https://hextaui.com/docs/separator/examples/render.md)
- [Long content](https://hextaui.com/docs/separator/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/separator/examples/rtl.md)