Button

Brand is the screen's main call to action; Default is the neutral one. Polymorphic through base-ui render (it stays a button: role, keyboard). A link that only looks like a button takes the classes instead, so it is announced as a link: <Link href="/" className={buttonVariants({ variant: "brand" })} />.

<Button variant="brand" size="44" trailingIcon={<ArrowRight />}>Continuar</Button>

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Button · Product

variant

size

children

string

dsState

Variantes, tamanhos e estados

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Variant · Default

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Variant · Brand

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Variant · Outline

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Variant · Secondary

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Variant · Ghost

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Variant · Destructive

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Variant · Link

Size	Default	Hover	Focus	Pressed	Disabled	Loading
32
36
40
44
48

Props

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

Prop	Tipo	Padrão	Descrição
variant?	"brand" \| "default" \| "destructive" \| "ghost" \| "link" \| "outline" \| "secondary" \| null	"default"
size?	"32" \| "36" \| "40" \| "44" \| "48" \| "default" \| "lg" \| "sm" \| "xs" \| null	"44"
fullWidth?	boolean \| null	false
disabled?	boolean	false
loading?	boolean	false	Busy: shows the spinner, keeps the label for screen readers, ignores presses.
leadingIcon?	ReactNode	—	Icon before the label (a lucide element); the size follows the button size.
trailingIcon?	ReactNode	—	Icon after the label.
className?	string	—
children?	ReactNode	—

Uso

import { Button } from "@superdinda/ui/actions";
import { ArrowRight } from "lucide-react";

<Button variant="brand" size="44" trailingIcon={<ArrowRight />}>
  Continuar
</Button>;

Brand é a chamada principal da tela; use uma por tela.
Default é a ação neutra; Outline, Secondary e Ghost são as secundárias, em ordem de peso.
Destructive só pra confirmação destrutiva, e com um verbo explícito ("Parar a proteção"), nunca só a cor.
Tamanhos: 44 e 48 são os de celular (alvo ≥ 44 px). 32–40 pra desktop denso. xs–lg são a escada densa do backoffice.
fullWidth estica no container (no Figma: instância em Fill container).

Composição

Link com cara de botão: aplique as classes num link, pra ele ser anunciado como link: <Link href="/familia" className={buttonVariants({ variant: "brand" })} />.
Botão que renderiza outro elemento mas continua botão: use render (<Button render={<a href="…" />}>); ele mantém papel e teclado de botão.
Ícones entram por leadingIcon / trailingIcon; o tamanho segue o size.

Acessibilidade

É um <button> nativo (base-ui), com teclado e foco de graça.
loading mostra o spinner, mantém o rótulo pra leitores de tela, aplica aria-busy e ignora cliques, mas continua focável.
disabled usa tokens apagados (color/action/disabled-*), nunca opacity-50, então o rótulo segue legível.
Foco: anel de 2 px color/focus-ring com folga de 2 px (ds-focus:ring-focus).