ATOM UIKit

A thin line that separates blocks horizontally or vertically. Visual rhythm between groups of content.

Preview

Editorial

## Ejemplos

Separate stacked blocks:

```tsx import { Divider } from '@/components/atoms/Divider';

<section>…</section> <Divider orientation="horizontal" /> <section>…</section> ```

## Accesibilidad

- Vertical sets `role="separator"` and `aria-orientation="vertical"`; horizontal is a plain `hr`. - Do not use dividers as the only way to express hierarchy — keep headings.

## Cuándo no usar

- Spacing alone without a rule → margin/gap utilities. - Interactive split panes → `Resizable`, not a static divider.

## Criterio de uso

- Usa Divider cuando una regla visible ayude a separar grupos que ya tienen estructura; no intentes construir jerarquía sólo con líneas. - Usa orientación horizontal entre bloques apilados y vertical dentro de toolbars o grupos inline. - Si la separación no aporta información, prefiere `gap` o margen para reducir ruido visual.

## Gotchas

- La orientación vertical tiene semántica de separator; la horizontal se comporta como `hr`. - No uses Divider como control interactivo ni como sustituto de un heading o label.

Uso

import { Divider } from '@/components/atoms/Divider';

<section>…</section>
<Divider orientation="horizontal" />
<section>…</section>

Props

Prop	Tipo	Default	Rango / opciones	What	How
orientation	select	horizontal	`horizontal`, `vertical`	Axis of the rule.	horizontal between stacked blocks; vertical in toolbars/inline groups. Default: horizontal.

Gotchas

a11y
Vertical sets role=separator and aria-orientation=vertical; horizontal is a plain hr.

Anatomía CSS

<div class="divider">

</div>

Clase	Propósito
`divider`	root
`divider--horizontal`	modifier
`divider--labeled`	modifier
`divider--vertical`	modifier

Tokens resueltos

Valores finales tras seguir la cadena de tokens. Derivados del source: si un token cambia, esta tabla cambia sola.

Variante	Prop	Valor	Token
all	border	`none`	`(unparsed)`
horizontal	border	`1px`	`stroke.hairline`
vertical	border	`1px`	`stroke.hairline`
labeled	fg	`#525252`	`muted.foreground`
labeled	border	`none`	`(unparsed)`
labeled	bg	`currentColor`	`(literal)`

CSS mínimo funcional

Autocontenido: sin imports ni tokens. Para previews y prototipos — en producción se consume el CSS del DS (@atom-uikit/css/components.css</code>, <code>@atom-uikit/tokens/tokens.css).

/* -------------------------------------------------------------------------
   Divider

   Horizontal or vertical separator line.
   Figma: atom-horizontal-divider. We add vertical variant.

   Orientation: horizontal (default), vertical
   ------------------------------------------------------------------------- */

.divider {
  border: none;
  margin: 0;
  flex-shrink: 0;
}

.divider--horizontal {
  width: 100%;
  height: 0;
  border-top: 1px solid #e5e5e5;
}

.divider--vertical {
  height: 100%;
  width: 0;
  border-left: 1px solid #e5e5e5;
  align-self: stretch;
}

/* ---- Labeled: etiqueta + linea que ocupa el resto (patron de seccion) ---- */

.divider--labeled {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: auto;
  border: none;
  color: #525252;
}

.divider--labeled::after {
  flex: 1;
  height: 1px;
  content: '';
  background-color: currentcolor;
  opacity: 0.15;
}

Codigo fuente

components-react

components/atoms/Divider.tsx

type DividerOrientation = 'horizontal' | 'vertical';

export type DividerProps = {
  orientation?: DividerOrientation;
  className?: string;
};

function cn(...classes: (string | false | undefined | null)[]) {
  return classes.filter(Boolean).join(' ');
}

export function Divider({
  orientation = 'horizontal',
  className,
}: DividerProps) {
  return (
    <hr
      className={cn('divider', `divider--${orientation}`, className)}
      role={orientation === 'vertical' ? 'separator' : undefined}
      aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
    />
  );
}

Webflow

Webflowdivider

Pega en el Designer como application/json, luego convierte a Component (Atom / Divider) y publica. Formato interno no documentado de Webflow — regenerable, no dependencia de runtime.

Setup del sitio (una vez)

Custom Code → Head:

<link rel="stylesheet" href="https://atom-web-ds.vercel.app/v1/tokens.css">
<link rel="stylesheet" href="https://atom-web-ds.vercel.app/v1/components.css">

Unsupported (no silencioso)

selector on .divider--labeled::after — compound/descendant selector — moved to head Custom Code (Designer styles are single-class)

Tras pegar: Create component → nombre Atom / Divider → Publish.

Componentes relacionados

Item

Table

Divider