Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Actions

ProviderButton

ProviderButton is the button for signing in with Apple or Google, in the provider's own mark and colours as each provider sets them.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

ProviderButton for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

ProviderButton for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
Signing in or creating an account with Apple or Google.
Not for
  • Any other actionButton
  • Linking an account inside the product (YouTube, a connector)Button with the service's name in the label

Guidelines

  • provider is apple or google. Apple's is white on Dark and black on Light; Google's is its own dark or light button with a grey edge. Sakuga sets only the size and the shape.
  • It takes none of Button's variants, icons or trailing value: the provider decides how it looks, so nothing can be combined with it.
  • Apple and Google sit as equals, the same size, Apple first. The labels are "Continue with Apple" and "Continue with Google", which it shows when given no label.
  • size="lg" (the default) on sign-in pages; md where it sits in a row of settings. shape="pill" on phones, fullWidth in a sign-in column.
  • Apple's white button is Apple's, not the view's primary action: a view can have both.
  • Pressing sinks it to 97% on motion-instant, like Button.
ProviderButtonExample.jsxReact
import { ProviderButton } from '@anicanon/sakuga/ui';

export default function ProviderButtonExample() {
  return (
    <>
      <ProviderButton provider="apple" style={{ flex: 1 }} />
      <ProviderButton provider="google" style={{ flex: 1 }} />
      <ProviderButton provider="apple" shape="pill" fullWidth />
      <ProviderButton provider="google" shape="pill" fullWidth />
    </>
  );
}

PropsProviderButtonProps

providerrequired
'apple' | 'google'
size
'md' | 'lg'
lg (default) on sign-in pages; md where it sits in a row of settings.
shape
'rounded' | 'pill'
pill on phones; rounded (radius-md) on desktop.
fullWidth
boolean
children
ReactNode
className
string
ProviderButtonExample.swiftiOS · coming soon
ProviderButtonExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

provider-button-apple-bgProviderButton apple: Apple's fill, white on Dark and black on Light, as Apple asks.
action-primaryneutral-925#0b0a10
action-primaryneutral-0#ffffff
provider-button-apple-fgProviderButton apple: label and mark.
text-inverseneutral-0#ffffff
text-inverseneutral-925#0b0a10
provider-button-google-bgProviderButton google: Google's fill. Google's own colours, read straight from the core: a provider's brand is theirs.
neutral-0#ffffff
google-ink#131314
provider-button-google-fgProviderButton google: label. Google's own colours, read straight from the core: a provider's brand is theirs.
google-paper-text#1f1f1f
google-ink-text#e3e3e3
provider-button-google-edgeProviderButton google: the 1px edge. Google's own colours, read straight from the core: a provider's brand is theirs.
google-paper-edge#747775
google-ink-edge#8e918f

Space and shape

provider-button-radius
radius-md
12px
provider-button-pill-radius
radius-full
9999px
provider-button-height-md
size-control-md
44px
provider-button-height-lg
size-control-lg
52px
provider-button-gap
gap-md
8px
provider-button-padding-x
inset-xl
24px
provider-button-padding-x-md
inset-lg
16px
provider-button-active-scale
scale-press
.97
provider-button-disabled-opacity
opacity-disabled
0.35
provider-button-google-inset-ring-width
line-hairline
1px
provider-button-forced-edge-width
line-hairline
1px

Type

provider-button-font
text-subtitle-sm
600 16px/22px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
provider-button-font-size-md
text-label-bold-size
14px
Aa
provider-button-line-height-md
text-label-bold-line-height
18px

Motion

provider-button-duration
motion-fast
160ms
provider-button-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
provider-button-active-duration
motion-instant
100ms

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A native button (a link with href): Tab reaches it, Enter activates it, and Space does too on a button; disabled takes a button out of the tab order. A screen reader hears its label ("Continue with Apple"); the provider's mark is hidden. With href and disabled it is a disabled button. Under reduced motion its press does not scale, and in forced colours it keeps an edge.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.