# Default

<x-alert>
  My alert content...
</x-alert>

---

# Prop type

<x-alert type="primary">My alert content...</x-alert>
<x-alert type="secondary">My alert content...</x-alert>
<x-alert type="success">My alert content...</x-alert>
<x-alert type="danger">My alert content...</x-alert>
<x-alert type="warning">My alert content...</x-alert>
<x-alert type="info">My alert content...</x-alert>
<x-alert type="light">My alert content...</x-alert>
<x-alert type="dark">My alert content...</x-alert>

---

# Alternative way to set type

<x-alert primary>My alert content...</x-alert>
<x-alert secondary>My alert content...</x-alert>
<x-alert success>My alert content...</x-alert>
<x-alert danger>My alert content...</x-alert>
<x-alert warning>My alert content...</x-alert>
<x-alert info>My alert content...</x-alert>
<x-alert light>My alert content...</x-alert>
<x-alert dark>My alert content...</x-alert>

---

# Prop icon

<x-alert icon="info-circle">
  My alert content...
</x-alert>

---

# Prop dismissable

<x-alert dismissable>
  My alert content...
</x-alert>

---