Alert ​

<template>
  <div class="grid-row">
    <AAlert>
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert color="success">
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert color="info">
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert color="warning">
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert color="danger">
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>
  </div>
</template>

<template>
  <div class="grid-row">
    <AAlert variant="fill">
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      variant="fill"
      color="success"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      variant="fill"
      color="info"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      variant="fill"
      color="warning"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      variant="fill"
      color="danger"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>
  </div>
</template>

<template>
  <div class="grid-row">
    <AAlert variant="outline">
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      color="success"
      variant="outline"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      color="info"
      variant="outline"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      color="warning"
      variant="outline"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>

    <AAlert
      color="danger"
      variant="outline"
    >
      Fruitcake I love liquorice apple pie croissant.
    </AAlert>
  </div>
</template>

<template>
  <div class="grid-row">
    <AAlert icon="i-bx-star">
      <span>Fruitcake I love liquorice apple pie croissant.</span>
    </AAlert>

    <AAlert
      variant="outline"
      color="success"
      icon="i-bx-dollar-circle"
    >
      <span>Fruitcake I love liquorice apple pie croissant.</span>
    </AAlert>

    <AAlert
      variant="light"
      color="danger"
      icon="i-bx-heart"
    >
      <span>Tiramisu gingerbread halvah powder gummi bears. Apple pie brownie apple pie biscuit chocolate cake.
        Pudding
        sweet muffin lollipop candy fruitcake.</span>
    </AAlert>
  </div>
</template>

<template>
  <div class="grid-row">
    <AAlert dismissible>
      <span>Fruitcake I love liquorice apple pie croissant.</span>
    </AAlert>

    <AAlert
      dismissible
      variant="fill"
      append-icon="i-bx-block"
    >
      <span>Fruitcake I love liquorice apple pie croissant.</span>
    </AAlert>

    <AAlert
      dismissible
      variant="outline"
      append-icon="i-bx-x-circle"
    >
      <span>Fruitcake I love liquorice apple pie croissant.</span>
    </AAlert>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isVisible = ref(true)
</script>

<template>
  <div class="grid-row">
    <AAlert v-model="isVisible">
      <span>Fruitcake I love liquorice apple pie croissant.</span>
    </AAlert>

    <ABtn @click="isVisible = !isVisible">
      Toggle visibility
    </ABtn>
  </div>
</template>