Foundations
Logo
The Superdinda logo (Figma "Logo" 172:204).
The lockup (brand ring + Gabarito wordmark) is the default in headers; the mark alone is for tight spaces. Colour comes from tokens, so dark mode follows the theme.
<Logo type="lockup" size="phone" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Logo
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).
Type · Mark
| Size · Tone | Logo |
|---|---|
| 32 · Foreground | |
| 32 · Brand |
Type · Lockup
| Size · Tone | Logo |
|---|---|
| Desktop · Foreground | Superdinda |
| Tablet · Foreground | Superdinda |
| Phone · Foreground | Superdinda |
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 |
|---|---|---|---|
| type? | "lockup" | "mark" | "mark" | |
| size? | "32" | "desktop" | "phone" | "tablet" | — | |
| tone? | "brand" | "foreground" | — | |
| label? | string | "Superdinda" | Accessible name of the mark alone. The lockup's wordmark is real text, so it needs none. Inside a link, name the link instead ("Superdinda, início") and pass `aria-hidden`. |
| className? | string | — |