# Divider
Un divider es una línea fina que separa contenido relacionado para crear ritmo visual y jerarquía dentro de una superficie.
```tsx
import { Divider } from "@fluentui/react-components";
<>
Sección anterior
Siguiente sección
```
## Uso
### Cuándo usarlo
- Separa grupos de contenido del mismo nivel jerárquico dentro de una superficie compartida.
- Crea ritmo visual entre secciones cortas que no justifican un título nuevo.
- Marca límites en listas densas, menús y toolbars.
### Cuándo no usarlo
- Para crear contraste decorativo: usa espacio en blanco o tipografía.
- Cuando ya existe un cambio de fondo, una card o un título que separe los bloques.
- Para reemplazar márgenes adecuados entre secciones.
## Orientación
### Horizontal
Es la orientación por defecto. Funciona como una pausa breve entre bloques apilados verticalmente.
```tsx
import { Divider } from "@fluentui/react-components";
<>
Sección anterior
Siguiente sección
```
### Vertical
Vertical se usa en barras de acciones, breadcrumbs o filas de metadata para separar elementos relacionados que viven en línea.
```tsx
Detalles
Movimientos
Documentos
```
## Variantes
### Con texto
Un divider puede contener un label corto cuando necesita comunicar la transición, por ejemplo entre dos métodos de autenticación o entre el contenido principal y opciones alternativas.
```tsx
O bien
```
### Sutil
- Usa el divider por defecto para separaciones operativas.
- Considera la variante subtle cuando el divider compite con bordes de cards o líneas adyacentes.
- No mezcles más de dos pesos de divider en la misma superficie.
## Accesibilidad
### Semántica
- El divider se renderiza con role="separator" para que tecnologías asistivas reporten la pausa.
- No dependas solo del divider para indicar agrupaciones: combina con tipografía, espacio o títulos.
- Si el divider lleva texto, ese texto debe describir la transición, no decorarla.