Pular para o conteúdo
Faculdade PhorteDesign System

CarouselNavButton

Em andamento

Botão redondo de anterior ou próximo para carrosséis, em quatro tratamentos — claro, escuro (sobre foto ou fundo escuro), contorno e verde tonal —, com nome acessível já em pt-BR. No fim da lista fica aria-disabled, sem perder o foco.

Função
Navegação e estrutura
Também chamado de
seta do carrossel, anterior e próximo, botão de navegação
Mora em
app/components/molecules/CarouselNavButton.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Variantes
  3. Desabilitado

Quando usar

Em par, nas laterais de um carrossel ou de uma fileira que rola na horizontal.

Faça

  • Use sempre em par (direction="left" e "right").
  • Troque o nome quando o item tiver nome melhor: aria-label="Depoimento anterior" vence o padrão.
  • Use variant="dark" sobre foto ou fundo escuro: o anel de foco passa a ser o claro.
  • Desabilite o botão da ponta quando o carrossel não der a volta: disabled vira aria-disabled, e o foco fica nele (E65).
  • Aponte aria-controls para a trilha que as setas rolam, e diga o que é o item: "Próximo depoimento".
  • Use variant="tonal" para o verde, em vez de sobrescrever a cor pela className (E65).

Evite

  • Setas que só aparecem no hover: quem usa teclado não passa o mouse.
  • variant="light" sobre fundo claro: o botão branco some.
  • Carrossel que avança sozinho sem pausa antes do conteúdo (usePausaDeMovimento), e mais de cinco pontos de página.

Quando não usar. Para trocar de página numa lista, use a Pagination. Para uma ação comum com ícone, o Button com aria-label.

Nota de uso

O padrão de carrossel (E65) — o botão sozinho não o garante: aponte aria-controls para a trilha; dê o nome do item no aria-label ("Próximo depoimento"); se houver avanço automático, a pausa vem antes do conteúdo (usePausaDeMovimento); no máximo cinco pontos. No fim da lista o botão fica aria-disabled, não disabled: o foco não cai no <body>. Use dark sobre foto e tonal para o verde — nunca a cor pela className.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Botão — Círculo de 44px (48px a partir de 768px), com sombra.
  2. Seta — Ícone de 24px, decorativo.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Padrãolight: fundo --card; dark: bg-sobre-escuro-medio com borda sobre-escuro-forte (tokens desde a E65); outline: transparente com borda; tonal: --secondary-subtle com seta --secondary-dark.
Hoverlight vira vermelho de interface com seta branca; dark vira claro com seta vermelha; outline ganha fundo; tonal enche de verde com seta branca.
PressionadoEncolhe para 95% (active:scale-95).
FocoAnel de 2px: ring-ring no light, no outline e no tonal, ring-ring-inverse no dark.
Desabilitadoaria-disabled (E65): 50% de opacidade e cursor proibido, mas continua no Tab e com o foco — o clique é ignorado.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Sem `aria-label`Nome "Item anterior" ou "Próximo item", pela direção.
Com `aria-label`O passado vence o padrão.
Chega ao fim da listaO "Próximo" passa a aria-disabled e o foco fica nele — conferido no teste da ficha. Com o disabled nativo de antes, o foco caía no <body> no último clique.

Relacionados