Backoffice
ConsoleHeader
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Console Header
boolean
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).
Viewport · Desktop
| Backoffice / Console Header |
|---|
Viewport · Mobile
| Backoffice / Console Header |
|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
ConsoleHeaderBrandProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | The router's link home, e.g. `render={<NextLink href="/" />}`. |
| className? | string | — |
ConsoleHeaderOperatorProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| initials | string | — | Two letters, from the name or the e-mail. |
| label | string | — | What the button opens: "Conta de Ana Lima". The name is read as "AL, Conta de Ana Lima": the visible initials first, so the name contains what is on screen (WCAG 2.5.3, label in name). |
| className? | string | — |