SsoButtons

A row of single sign-on buttons. Each stays pending until your app redirects.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { SsoButtons, Stack, Text } from '@weft-js/warp'export function Providers() {  const picked = state('')  const go = async (id: string) => {    await wait(900)    picked.value = id  }  return (    <Stack gap="related">      <SsoButtons providers={SSO} onProvider={go} />      <Text subtle>{picked.value ? `Would redirect to ${picked.value}.` : 'Each stays pending until your app redirects.'}</Text>    </Stack>  )}const wait = (ms: number) => new Promise(done => { setTimeout(done, ms) })const PROVIDERS = [{ id: 'google', label: 'Google', glyph: 'M12 3a9 9 0 1 0 8.5 12H12' }, { id: 'github', label: 'GitHub', glyph: 'M9 8l-5 4 5 4M15 8l5 4-5 4' }]const SSO = [...PROVIDERS, { id: 'saml', label: 'SAML', name: 'single sign-on' }]

Installation

npm install @weft-js/warp

Usage

tsx

import { SsoButtons } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`providers`	`SsoProvider[]`	—	An id, a short label, and one monochrome icon path.

Event	Type	Default	Description
`onProvider`	`((id: string) => unknown)`	—	Called with the id.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="grid"] [data-part="sr-only"]

sr-only

RelatedSign in Passkey button