PairingSteps

Playground

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

Pairing Steps

Abra o WhatsApp.
Toque em ⋮ (Android) ou em Configurações (iPhone) e escolha Dispositivos conectados.
Toque em Conectar dispositivo e depois em Conectar com número de telefone.
Digite o código acima.

className

string

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

Pairing Steps
Abra o WhatsApp. Toque em ⋮ (Android) ou em Configurações (iPhone) e escolha Dispositivos conectados. Toque em Conectar dispositivo e depois em Conectar com número de telefone. Digite o código acima.

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

PairingStepsRootProps

Prop	Tipo	Padrão	Descrição
className?	string	—

PairingStepsItemProps

Prop	Tipo	Padrão	Descrição
number	string	—	Figma `number`: the digit in the marker ("1").
state?	"default" \| "done"	"default"	Figma State: Done swaps the number for a check on ok-subtle when the app can confirm the step.
doneLabel?	string	—	Words a screen reader hears after a done step ("feito").
className?	string	—
children	ReactNode	—	Figma `text`: the instruction.