# 툴바 구분선

헤더나 툴바에서 액션 묶음 사이를 나누는 가는 선이에요.

- Type: component
- Theme: base
- Tags: arc, component, divider, separator, toolbar, header
- English title: Toolbar divider
- URL: https://dsui.vercel.app/items/toolbar-divider

## Controls

| Key | Type | Label | Default |
| --- | --- | --- | --- |
| size | select | 길이 | md |
| orientation | select | 방향 | vertical |

## Source

### toolbar-divider.module.css

```css
/* A separator carries no meaning on its own, so it stays decorative and only has to read against the surface it sits on. */
.divider { flex: none; background: var(--border); border-radius: var(--radius-pill); }
.vertical { width: 1px; }
.horizontal { height: 1px; }
.vertical.sm { height: var(--space-4); }
.vertical.md { height: var(--space-6); }
.vertical.lg { height: var(--space-8); }
.horizontal.sm { width: var(--space-4); }
.horizontal.md { width: var(--space-6); }
.horizontal.lg { width: var(--space-8); }

```

### toolbar-divider.tsx

```tsx
import type { HTMLAttributes } from "react";
import styles from "./toolbar-divider.module.css";

export type ToolbarDividerSize = "sm" | "md" | "lg";

export interface ToolbarDividerProps extends HTMLAttributes<HTMLSpanElement> {
  /** How tall the line is: sm 16px, md 24px, lg 32px. */
  size?: ToolbarDividerSize;
  /** Lays the line across instead of down, for a stacked toolbar. */
  orientation?: "vertical" | "horizontal";
}

/** A hairline between groups of actions in a toolbar or header. Decorative, so it never reaches the accessibility tree. */
export function ToolbarDivider({ className, size = "md", orientation = "vertical", ...props }: ToolbarDividerProps) {
  const classes = [styles.divider, styles[size], styles[orientation], className].filter(Boolean).join(" ");
  return <span aria-hidden="true" className={classes} {...props} />;
}

ToolbarDivider.displayName = "ToolbarDivider";

export default ToolbarDivider;

```