Actions
Link
Navigation text (Figma "Link" 2056:62010), always underlined so state is never colour alone.
Inline sits in running text and takes its type; Standalone stands on its own line, at least 48 px tall for touch (a long label wraps instead of overflowing). Use Button for in-page actions. External links (target="_blank") get rel="noopener noreferrer"; say "abre em nova aba" in the label.
<Link render={<NextLink href="/conta" />}>Ver detalhes da conta</Link>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
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).
Kind · Inline
| Tone | Default | Hover | Focus | Disabled |
|---|---|---|---|---|
| Brand | Ver detalhes | Ver detalhes | Ver detalhes | Ver detalhes |
| Neutral | Ver detalhes | Ver detalhes | Ver detalhes | Ver detalhes |
Kind · Standalone
| Tone | Default | Hover | Focus | Disabled |
|---|---|---|---|---|
| Brand | Ver detalhes | Ver detalhes | Ver detalhes | Ver detalhes |
| Neutral | Ver detalhes | Ver detalhes | Ver detalhes | Ver detalhes |
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 |
|---|---|---|---|
| kind? | "inline" | "standalone" | null | "inline" | |
| tone? | "brand" | "neutral" | null | "brand" | |
| disabled? | boolean | false | No destination right now. Prefer removing the link; when it has to stay visible it renders as plain text (no href, not focusable). |
| trailingIcon? | ReactNode | — | Figma "trailingIcon" (shown on Standalone): a lucide element, e.g. <ArrowRight />. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link, e.g. `render={<NextLink href="/familia" />}`. |
| className? | string | — | |
| children? | ReactNode | — |