<!-- source-hash: e190543dcb8ddd78af0a45f332d3eefe -->
A selectable button component that supports icons, images, tags, and selected/disabled states, designed for use in option-selection UIs such as lists or grids.

## Key Components

### `SelectButtonProps`
| Prop | Type | Description |
|------|------|-------------|
| `title` | `string` | Primary label text (required) |
| `description` | `string` | Optional subtitle, visible on `md+` screens |
| `selected` | `boolean` | Highlights the button with accent styling and shows a check icon |
| `disabled` | `boolean` | Disables interaction and reduces opacity |
| `icon` | `React.ReactNode` | Optional leading icon |
| `image` | `{ src, alt }` | Optional thumbnail image |
| `tag` | `string` | Optional badge label rendered via `Tag` |
| `tagVariant` | `TagProps['variant']` | Controls tag style, defaults to `"outline"` |
| `onClick` | `() => void` | Click handler |
| `className` | `string` | Additional CSS classes |

### `SelectButton`
A `forwardRef` button with `role="option"` and `aria-selected`, suitable for accessible listbox patterns. Applies ODS design tokens for color, spacing, and focus states.

## Usage Example

```typescript
import { SelectButton } from './select-button'
import { ServerIcon } from '../icons-v2-generated/...'

// Basic selectable option
<SelectButton
  title="Standard Plan"
  description="Up to 10 devices"
  selected={selectedPlan === 'standard'}
  onClick={() => setSelectedPlan('standard')}
/>

// With icon and tag
<SelectButton
  title="Enterprise Plan"
  description="Unlimited devices"
  icon={<ServerIcon />}
  tag="Popular"
  tagVariant="solid"
  selected={selectedPlan === 'enterprise'}
  onClick={() => setSelectedPlan('enterprise')}
/>

// With thumbnail image
<SelectButton
  title="Acme Corp"
  image={{ src: '/logos/acme.png', alt: 'Acme Corp logo' }}
  selected={true}
/>
```