SsoButtons

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { SsoButtons, Stack, Text } from '@kerf-js/veneer'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}.`          : providerDescription}      </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' },]const providerDescription =  'Each stays pending until your app redirects.'

Installation

npm install @kerf-js/veneer

Usage

tsx

import { SsoButtons } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer'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