# Button

## Visual Structure

```
ga-button [--primary|--secondary|--ghost|--transparent] [--icon-only]
```

## Elements Hierarchy

### Core Block

- `ga-button` - Main container for the button component

### Modifiers

#### Variant modifiers

- `ga-button--primary` - Primary button
- `ga-button--secondary` - Secondary button
- `ga-button--ghost` - Transparent button with no border
- `ga-button--transparent` - Transparent button with border

#### Type modifiers

- `ga-button--icon-only` - Button variant optimized for displaying only an icon (different paddings)

## Examples

### Text (with optional icon) Button

```html
<button class="ga-button ga-button--primary">Button</button>
<button class="ga-button ga-button--secondary">Button</button>
<button class="ga-button ga-button--ghost">Button</button>
<button class="ga-button ga-button--transparent">Button</button>
```

```html
<button class="ga-button ga-button--primary">
  <UserRoundPlusIcon class="ga-icon" /> Button
</button>
<button class="ga-button ga-button--secondary">
  <UserRoundPlusIcon class="ga-icon" /> Button
</button>
<button class="ga-button ga-button--ghost">
  <UserRoundPlusIcon class="ga-icon" /> Button
</button>
<button class="ga-button ga-button--transparent">
  <UserRoundPlusIcon class="ga-icon" /> Button
</button>
```

### Icon (only) Button

```html
<button class="ga-button ga-button--primary ga-button--icon-only">
  <DownloadIcon class="ga-icon" />
</button>
```