# Divider

La línea fina que separa dos partes, cuando el espacio por sí solo no es suficiente.

## Playground

```html
<div class="feitio-stack" data-gap="3" style="inline-size: min(100%, 24rem)"><span>Arriba</span><hr class="feitio-divider"><span>Abajo</span></div>
```

## Cuándo usarlo

-   Entre las partes que se tocan y necesitan un límite: el pie de página y la página, el encabezado de una tabla y sus filas.

## Cuándo no usarlo

-   **Entre secciones de texto:** el espacio ya separa; una línea extra es ruido.
-   **Para marcar un espacio vacío:** eso es la línea punteada.

## Ejemplos

### Línea fina y tinta

La línea fina, en el color de la línea, para casi todo; la tinta, para un límite fuerte, como debajo del encabezado de una tabla.

Mostrar código

```html
<hr class="feitio-divider">
<hr class="feitio-divider" data-tone="ink">
```

### Vertical

Entre piezas lado a lado, de la altura de la fila: aquí separa un grupo de acciones de las demás.

Mostrar código

```html
<div class="feitio-inline" data-gap="3">
  <button type="button" class="feitio-button" data-size="small">Editar</button>
  <button type="button" class="feitio-button" data-size="small">Duplicar</button>
  <hr class="feitio-divider" aria-orientation="vertical">
  <button type="button" class="feitio-button" data-size="small" data-variant="danger">Apagar</button>
</div>
```

## Reglas

-   Sin margen propio: el espacio alrededor viene del Stack que lo contiene.
-   1px, siempre; nunca una banda gruesa.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-divider"`

sobre el `<hr>`

La línea fina.

`data-tone="ink"`

opcional

La línea de tinta, para un límite fuerte.