# Core/Button - Usage

Primary interactive element displaying text and supporting leading and trailing icons.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `string` | Yes | `--` | The `label` for the button. |
| `variant` | `(typeof variants)[number]` | No | 'secondary' | Which button style to use. Defaults to `secondary`. |
| `appearance` | `(typeof appearances)[number]` | No | 'default' | Appearance to apply to the button. Defaults to `default`. |
| `size` | `(typeof sizes)[number]` | No | 'md' | Size of the button. Defaults to `md`. |
| `disabled` | `boolean` | No | false | Whether the button is disabled. |
| `pending` | `boolean` | No | false | Whether the button is in a pending state. |
| `leadingIcon` | `SvgIcon` | No | `--` | Icon to display before the button text. |
| `trailingIcon` | `SvgIcon` | No | `--` | Icon to display after the button text. |
| `block` | `boolean` | No | `--` | Whether to display the button as a block-level (full-width) component. Defaults to `false`. |
| `onClick` | `React.ComponentProps<'button'>['onClick']` | No | `--` | Click handler for the button. |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |