# ButtonStyle

Configuration options for authentication button appearance and behavior.

## Type definition

```typescript
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`    | <code>continue \| sign_in \| sign_up \| verify \| icon</code> | Button text and purpose | <code>continue</code> | No       |
| `size`    | <code>large \| small</code>                                   | Button size             | <code>large</code>    | No       |
| `variant` | <code>dark \| light \| light-outlined</code>                  | Visual style            | <code>dark</code>     | No       |
| `radius`  | <code>none \| default \| round</code>                         | Corner rounding         | <code>default</code>  | 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

```typescript
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 buttonStyle params to mountButton method.

```typescript
mountButton(container)
```