Alert

<script setup lang="ts">
  import { Alert, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-xl">
    <Alert>Saved to drafts.</Alert>
    <Alert tone="accent">A new version is available; refresh the page to try it.</Alert>
    <Alert tone="info">This page was contributed by a user and has not been reviewed yet.</Alert>
    <Alert tone="success">The article has been published.</Alert>
    <Alert tone="warning">Your session is about to expire; save your work soon.</Alert>
    <Alert tone="danger">Publishing failed; please try again later.</Alert>
    <Alert tone="success" :icon="false">The article has been published.</Alert>
  </Stack>
</template>

<script setup lang="ts">
  import { Alert } from '@hina-ui/vue'
  import { Sparkles } from '@lucide/vue'
</script>

<template>
  <Alert tone="accent" class="w-full max-w-xl">
    <template #icon><Sparkles class="text-accent-text mt-0.5 size-5 shrink-0" /></template>
    A new version is available; refresh the page to try it.
  </Alert>
</template>

<script setup lang="ts">
  import { Alert } from '@hina-ui/vue'
</script>

<template>
  <Alert tone="warning" title="Your session is about to expire" class="w-full max-w-xl">
    Save what you are editing within five minutes, or you will need to sign in again.
  </Alert>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Alert, Button, Stack } from '@hina-ui/vue'

  const open = ref(true)
</script>

<template>
  <Stack class="min-h-28 w-full max-w-xl">
    <Alert v-model:open="open" tone="success" closable>The article has been published.</Alert>
    <Button variant="soft" tone="neutral" :disabled="open" class="self-start" @click="open = true">
      Show again
    </Button>
  </Stack>
</template>

<script setup lang="ts">
  import { Alert, Button } from '@hina-ui/vue'
</script>

<template>
  <Alert tone="info" title="New comments" class="w-full max-w-xl">
    Your article has received 3 new comments.
    <template #actions>
      <Button size="sm" variant="soft" tone="neutral">Later</Button>
      <Button size="sm">View</Button>
    </template>
  </Alert>
</template>