funkwhale/front/ui-docs/components/ui/alert.md

# Alert

| Prop    | Data type                                          | Required? | Default     | Description                      |
| ------- | -------------------------------------------------- | --------- | ----------- | -------------------------------- |
| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No        | `secondary` | The color of the alert container |

## Alert colors

Funkwhale alerts support a range of pastel colors for visual appeal.

::: details Colors

- Red
- Blue
- Purple
- Green
- Yellow

:::

### Blue

```vue-html
<fw-alert color="blue">
  Blue alert
</fw-alert>
```

<fw-alert color="blue">
  Blue alert
</fw-alert>

### Red

```vue-html
<fw-alert color="red">
  Red alert
</fw-alert>
```

<fw-alert color="red">
  Red alert
</fw-alert>

### Purple

```vue-html
<fw-alert color="purple">
  Purple alert
</fw-alert>
```

<fw-alert color="purple">
  Purple alert
</fw-alert>

### Green

```vue-html
<fw-alert color="green">
  Green alert
</fw-alert>
```

<fw-alert color="green">
  Green alert
</fw-alert>

### Yellow

```vue-html
<fw-alert color="yellow">
  Yellow alert
</fw-alert>
```

<fw-alert color="yellow">
  Yellow alert
</fw-alert>

## Alert actions

```vue-html{2-4}
<fw-alert>
  Awesome artist

  <template #actions>
    <fw-button>Got it</fw-button>
  </template>
</fw-alert>
```

<fw-alert>
  Awesome artist
  <template #actions>
    <fw-button>Got it</fw-button>
  </template>
</fw-alert>