---
title: Separator 分隔符
description: 在内容区块之间进行视觉分隔。
links:
  rac: Separator
  source: separator/separator.tsx
  styles: separator.css
  storybook: Components/Layout/Separator
  figma: true
---

## 用法

```tsx
import { Separator } from '@heroui/react';
```

<ComponentPreview
  name="separator-basic"
/>

## 示例

### 变体

<ComponentPreview
  name="separator-variants"
/>

### 与 Surface 组合

Separator 组件会根据不同的表面背景自动适配，以获得更好的可见性。

<ComponentPreview
  name="separator-with-surface"
/>

### 垂直方向

<ComponentPreview
  name="separator-vertical"
/>

### 带内容

<ComponentPreview
  name="separator-with-content"
/>

### 渲染函数

<ComponentPreview
  name="separator-render-function"
/>

## 自定义样式

### Tailwind CSS

<ComponentPreview name="separator-custom-styles" />

### 全局 CSS

若要自定义组件类，可使用 `@layer components` 指令。[了解更多](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes)。

```css
@layer components {
  .separator {
    @apply bg-accent h-[2px];
  }

  .separator--vertical {
    @apply bg-accent w-[2px];
  }
}
```

## 样式参考

HeroUI 遵循 [BEM](https://getbem.com/) 方法论，确保组件变体与状态可复用且易于自定义。

### CSS 类

Separator 使用以下 CSS 类（[查看源码样式](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/separator.css)）：

#### 基础类与方向类 [!toc]
- `.separator` - 基础 Separator 样式，默认水平方向
- `.separator--horizontal` - 水平方向（全宽，高度 1px）
- `.separator--vertical` - 垂直方向（全高，宽度 1px）

#### 变体类 [!toc]
- `.separator--default` - 默认变体，标准对比度
- `.separator--secondary` - 次要变体，中等对比度
- `.separator--tertiary` - 第三级变体，较弱对比度

## API 参考

### Separator
| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Separator 的方向 |
| `variant` | `'default' \| 'secondary' \| 'tertiary'` | `'default'` | Separator 的视觉变体 |
| `className` | `string` | - | 额外的 CSS 类名 |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>` | - | 通过自定义渲染函数覆盖默认的 DOM 元素。 |

## 相关组件

<RelatedComponents component="separator" />