ButtonStyle

Configuration options for authentication button appearance and behaviour.

Type definition​

type ButtonStyle = {
  kind?: ButtonKind
  radius?: ButtonRadius
  size?: ButtonSize
  variant?: ButtonVariant
}

type ButtonKind = 'continue' | 'sign_in' | 'sign_up' | 'verify' | 'icon'

type ButtonSize = 'large' | 'small'

type ButtonVariant = 'dark' | 'light' | 'light-outlined'

type ButtonRadius = 'none' | 'default' | 'round'

Parameters​

Parameter	Type	Description	Default	Required
kind	continue | sign_in | sign_up | verify | icon	Button text and purpose	continue	No
size	large | small	Button size	large	No
variant	dark | light | light-outlined	Visual style	dark	No
radius	none | default | round	Corner rounding	default	No

Button kind options​

Kind	Description
continue	"Continue with Revolut" - general authentication
sign_in	"Sign in with Revolut" - login flows
sign_up	"Sign up with Revolut" - registration flows
verify	"Verify with Revolut" - identity verification
icon	Revolut icon only - compact design

Button size options​

Size	Description
large	Standard size for primary actions
small	Compact size for secondary placements

Button variant options​

Variant	Description
dark	Dark background with light text (default)
light	Light background with dark text
light-outlined	Light background with border and dark text

Button radius options​

Radius	Description
none	Square corners (0px border-radius)
default	Standard rounded corners
round	Fully rounded corners (pill shape)

Usage examples​

Basic usage​

const { mountButton } = revolutId.initialise({
  clientId: 'your-client-id',
  redirectUri: 'https://your-app.com/callback',
  scope: ['openid', 'profile', 'email']
})

mountButton(container, {
  kind: 'sign_in',
  size: 'large',
  variant: 'dark',
  radius: 'default'
})

Default styling​

For default styling, don't pass any buttonStyle parameters to mountButton.

mountButton(container)