Divisor

Um separador horizontal composable para organizar interfaces de aplicativo densas. Use uma única linha de cabelo, linha dupla emoldurada, ou tira cheia suave, em seguida, coloque texto, botões, ou controles compactos em qualquer lugar ao longo dele.

Notificações

Hoje

Última atividade

Instalação

Você pode adicionar o componente divisor usando nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add divider

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Variantes

Escolher single, double, ou fill. Cada tratamento usa borda semântica BoardUI e tokens de superfície, por isso segue o tema ativo automaticamente.

Linha única

Linha dupla

Preenchimento de fundo

<Divider>Single line</Divider><Divider variant="double">Double line</Divider><Divider variant="fill">Background fill</Divider>

Alinhamento

A align O conteúdo das posições de apoio no início, no centro ou no fim. Os divisores de linha única mantêm a linha do cabelo do lado aberto.

Iniciar

Centro

Fim

<Divider align="start">Start</Divider><Divider align="center">Center</Divider><Divider align="end">End</Divider>

Ícones, fichas, botões e avatares

As crianças não se restringem ao texto. Um ícone, um chip, um botão, um grupo de botões, ou uma pilha de avatares todos se sentam no mesmo slot, e a linha fecha em torno de qualquer largura que tenham. Não estão envolvidos acessórios extras: o conteúdo é composto como crianças, por isso qualquer coisa compacta pertence aqui.

NOVO

import { RiAddLine, RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";import { Avatar } from "@/components/base/avatar/avatar";import { Chip } from "@/components/base/badges/chip";import { Button } from "@/components/base/buttons/button";import { ButtonGroup, ButtonGroupItem } from "@/components/base/buttons/button-group";
{/* Icon */}<Divider>  <RiAddLine className="size-5 text-foreground-icon-secondary" aria-hidden /></Divider>
{/* Chip */}<Divider>  <Chip color="neutral">NEW</Chip></Divider>
{/* Button */}<Divider>  <Button variant="secondary" size="small">Button</Button></Divider>
{/* Button group */}<Divider>  <ButtonGroup size="small" aria-label="Move item">    <ButtonGroupItem size="small" aria-label="Move down">      <RiArrowDownLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Add between">      <RiAddLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Move up">      <RiArrowUpLine className="size-5" aria-hidden />    </ButtonGroupItem>  </ButtonGroup></Divider>
{/* Avatar group */}<Divider>  <div className="flex items-center">    <Avatar size="md" src="/avatars/aspen-lubin.webp" alt="Aspen Lubin"      className="ring-2 ring-background-primary-default" />    <Avatar size="md" src="/avatars/john-clarkson.webp" alt="John Clarkson"      className="-ml-2 ring-2 ring-background-primary-default" />    <span className="-ml-2 inline-flex size-8 items-center justify-center rounded-full bg-neutral-900 text-caption-1-semibold text-white ring-2 ring-background-primary-default dark:bg-neutral-700">      +7    </span>  </div></Divider>
{/* Any of the above also works on the filled surface */}<Divider variant="fill">  <ButtonGroup size="small" aria-label="Activity filter">    <ButtonGroupItem size="small" selected>All</ButtonGroupItem>    <ButtonGroupItem size="small">Unread</ButtonGroupItem>    <ButtonGroupItem size="small">Archived</ButtonGroupItem>  </ButtonGroup></Divider>

Sem conteúdo

Omitir crianças para um separador puramente estrutural. Nesta forma, o componente expõe o papel separador nativo e orientação horizontal para a tecnologia assistiva.

<Divider aria-label="Section break" /><Divider variant="double" aria-label="Section break" /><Divider variant="fill" aria-label="Section break" />