Alert.vue

<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const variants = ['solid', 'outline', 'soft', 'subtle'] as const
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Colors">
      <div class="flex w-full max-w-md flex-col gap-3">
        <UAlert
          v-for="c in colors"
          :key="c"
          :color="c"
          variant="soft"
          :title="c"
          description="Session event delivered by the runtime."
          icon="i-material-symbols-notifications-outline"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="Variants">
      <div class="flex w-full max-w-md flex-col gap-3">
        <UAlert
          v-for="v in variants"
          :key="v"
          color="primary"
          :variant="v"
          :title="v"
          description="Job accepted by the runtime."
          icon="i-material-symbols-check-circle-outline"
          class="capitalize"
        />
      </div>
    </GallerySection>

    <GallerySection title="With actions">
      <UAlert
        class="w-full max-w-md"
        color="warning"
        variant="soft"
        title="Lease expiring"
        description="The job lease expires in 30 seconds."
        icon="i-material-symbols-timer-outline"
        :actions="[{ label: 'Renew', color: 'warning' }, { label: 'Dismiss', variant: 'ghost', color: 'neutral' }]"
      />
    </GallerySection>
  </div>
</template>