ProviderAction

A sign-in provider pill (Figma "Provider Action" 183:582): the dark shell with the provider mark on a brand block, "Continuar com Google/Apple".

Hover darkens and lifts it, press squeezes it to 97 %. A provider that is not offered yet is disabled with a "Em breve" hint, never hidden.

<ProviderAction icon={<GoogleIcon />} shortLabel="Google" onClick={signIn}>Continuar com Google</ProviderAction>

Playground

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

Provider Action

viewport

className

children

string

dsState

hint

string

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

Default	Hover	Pressed	Disabled

Default	Hover	Pressed	Disabled

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
icon	ReactNode	—	Figma `Icon`: the provider mark (GoogleIcon, AppleIcon), drawn on the brand block.
children	ReactNode	—	Figma `Label`: "Continuar com Google". One line, never wraps.
shortLabel?	ReactNode	—	Shown instead of `children` while the pill is narrower than 352 px (a container query), where the full label would be cut right where the provider's name is ("Google").
viewport?	"desktop" \| "phone"	—	Figma `Viewport`. Leave it out to follow the screen (phone below `sm`).
disabled?	boolean	false	Figma State=Disabled: not available yet. Pair it with `hint`.
hint?	ReactNode	—	The trailing tag of a disabled provider ("Em breve").
className?	string	—