Account
PreferenceRow
One channel of a notification subject (Figma "Preference Row" 193:1922): the channel name and its mode (Na hora, No resumo do dia, Desligado).
A channel that is not delivered yet stays visible with "Em breve" and a disabled control, so the shape is honest and nothing is promised. Below ~22rem the control wraps under the name.
<PreferenceRow label="Notificação do navegador" labelId="pref-push" soon>
<Select.Root items={MODES} value="off" disabled>
<Select.Trigger size="default" aria-labelledby="pref-push" />
</Select.Root>
</PreferenceRow>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Preference Row
string
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).
| Default | Soon |
|---|---|
No app | Notificação do navegadorEm breve |
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 |
|---|---|---|---|
| label | ReactNode | — | Figma "Channel": where the notice goes ("No app", "E-mail"). It names the control. |
| labelId | string | — | Id of the channel label. Give the control the same id in `aria-labelledby`, so the row's label names it. |
| soon? | boolean | false | Figma State=Soon: the channel exists but does not deliver yet. Shows the `soonLabel` tag; disable the control yourself. |
| soonLabel? | ReactNode | "Em breve" | Tag of a channel that is not live yet. Default "Em breve". |
| className? | string | — | |
| children | ReactNode | — | The control, usually a compact Select (Size=Default, 176 px). Give Select.Root a `name`: base-ui then keeps its hidden input inside the row instead of pinning it to the viewport corner. |