> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Shape Tokens

> Radius, border width, and size tokens for component shapes and dimensions

<Warning>
  Primer Checkout Android SDK is currently in **beta** (v3.0.0-beta).
  The API is subject to change before the stable release.
</Warning>

## RadiusTokens

```kotlin theme={"dark"}
data class RadiusTokens(
    val xsmall: Dp = 2.dp,
    val small: Dp = 4.dp,
    val medium: Dp = 8.dp,
    val large: Dp = 12.dp,
    val base: Dp = 4.dp,
)
```

| Token    | Preview                                                          | Default | Usage                |
| -------- | ---------------------------------------------------------------- | ------- | -------------------- |
| `xsmall` | <span className="token-radius" style={{borderRadius: "2px"}} />  | 2.dp    | Subtle rounding      |
| `small`  | <span className="token-radius" style={{borderRadius: "4px"}} />  | 4.dp    | Chips, tags          |
| `medium` | <span className="token-radius" style={{borderRadius: "8px"}} />  | 8.dp    | Input fields, cards  |
| `large`  | <span className="token-radius" style={{borderRadius: "12px"}} /> | 12.dp   | Bottom sheet corners |
| `base`   | <span className="token-radius" style={{borderRadius: "4px"}} />  | 4.dp    | Base unit            |

## BorderWidthTokens

```kotlin theme={"dark"}
data class BorderWidthTokens(
    val thin: Dp = 1.dp,
    val medium: Dp = 2.dp,
    val thick: Dp = 3.dp,
)
```

| Token    | Preview                                                       | Default | Usage                         |
| -------- | ------------------------------------------------------------- | ------- | ----------------------------- |
| `thin`   | <span className="token-width" style={{borderWidth: "1px"}} /> | 1.dp    | Input borders, dividers       |
| `medium` | <span className="token-width" style={{borderWidth: "2px"}} /> | 2.dp    | Focus rings, selected borders |
| `thick`  | <span className="token-width" style={{borderWidth: "3px"}} /> | 3.dp    | Heavy emphasis borders        |

## SizeTokens

```kotlin theme={"dark"}
data class SizeTokens(
    val small: Dp = 16.dp,
    val medium: Dp = 20.dp,
    val large: Dp = 24.dp,
    val xlarge: Dp = 32.dp,
    val xxlarge: Dp = 44.dp,
    val xxxlarge: Dp = 56.dp,
    val base: Dp = 4.dp,
)
```

| Token      | Preview                                                                 | Default | Usage                |
| ---------- | ----------------------------------------------------------------------- | ------- | -------------------- |
| `small`    | <span className="token-size" style={{width: "16px", height: "16px"}} /> | 16.dp   | Small icons          |
| `medium`   | <span className="token-size" style={{width: "20px", height: "20px"}} /> | 20.dp   | Default icons        |
| `large`    | <span className="token-size" style={{width: "24px", height: "24px"}} /> | 24.dp   | Large icons          |
| `xlarge`   | <span className="token-size" style={{width: "32px", height: "32px"}} /> | 32.dp   | Payment method icons |
| `xxlarge`  | <span className="token-size" style={{width: "44px", height: "44px"}} /> | 44.dp   | Touch targets        |
| `xxxlarge` | <span className="token-size" style={{width: "56px", height: "56px"}} /> | 56.dp   | Large touch targets  |
| `base`     | <span className="token-size" style={{width: "4px", height: "4px"}} />   | 4.dp    | Base unit            |

Access all shape tokens via `LocalPrimerTheme.current` inside the checkout composable tree.