# Quick Filter Button

## Visual Structure

```
ga-quick-filter-button [--selected|--transparent|--disabled]
```

## Elements Hierarchy

### Core Block

- `ga-quick-filter-button` - Main container for the quick filter button component used for filtering content

### Modifiers

- `ga-quick-filter-button--selected` - Selected state indicating the filter is active
- `ga-quick-filter-button--transparent` - Transparent variant for use on colored backgrounds
- `ga-quick-filter-button--disabled` - An explicit disabled state (can be omitted if used on a native `<button>` element)

## Examples

### Default

```html
<button class="ga-quick-filter-button">Button</button>
```

### With Icon

```html
<button class="ga-quick-filter-button">
  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
  Button
</button>
```

### Selected

```html
<button class="ga-quick-filter-button ga-quick-filter-button--selected">
  Button
</button>
```

### Selected with Icon

```html
<button class="ga-quick-filter-button ga-quick-filter-button--selected">
  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
  Button
</button>
```

### Transparent

```html
<button class="ga-quick-filter-button ga-quick-filter-button--transparent">
  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
  Button
</button>
```

### Disabled

```html
<button
  class="ga-quick-filter-button ga-quick-filter-button--disabled"
  disabled=""
>
  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
  Button
</button>
```