Flag (Toast Notifications)
Flag is a toast notification that slides in from the bottom-right of the screen. Use FlagGroup once in your app layout to render the container, and the useFlag composable anywhere to trigger notifications.
Setup: Add
<FlagGroup />once in your app root layout (e.g.,App.vue). It teleports to<body>automatically.
Interactive demo
vue
<script setup>
import { useFlag } from '@jetpack-labs/jetpack-ui'
const { addFlag } = useFlag()
</script>
<template>
<Button @click="addFlag({ title: 'Info flag', description: 'Informational message.', appearance: 'info' })">
Info
</Button>
<Button @click="addFlag({ title: 'Success!', appearance: 'success' })">
Success
</Button>
<Button @click="addFlag({ title: 'Warning', appearance: 'warning' })">
Warning
</Button>
<Button @click="addFlag({ title: 'Error occurred', appearance: 'error' })">
Error
</Button>
</template>Setup
vue
<!-- App.vue -->
<script setup>
import { FlagGroup } from '@jetpack-labs/jetpack-ui'
</script>
<template>
<RouterView />
<FlagGroup />
</template>Then trigger flags from any component:
ts
import { useFlag } from '@jetpack-labs/jetpack-ui'
const { addFlag, removeFlag } = useFlag()
// Basic
addFlag({ title: 'Saved', appearance: 'success' })
// With all options
addFlag({
id: 'my-flag',
title: 'Upload complete',
description: '3 files were uploaded successfully.',
appearance: 'success',
autoDismiss: true,
duration: 5000,
})Flag Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Required. Unique flag identifier |
title | string | — | Required. Primary message text |
description | string | — | Optional secondary text |
appearance | 'info' | 'success' | 'warning' | 'error' | 'info' | Color and icon style |
autoDismiss | boolean | true | Automatically dismiss after duration ms |
duration | number | 4000 | Auto-dismiss delay in milliseconds |
Flag Emits
| Event | Payload | Description |
|---|---|---|
dismiss | id: string | Emitted when dismissed (auto or manual) |
useFlag API
| Member | Type | Description |
|---|---|---|
flags | Ref<FlagItem[]> | Reactive list of active flags |
addFlag(options) | (options: FlagOptions) => string | Add a new flag; returns its id |
removeFlag(id) | (id: string) => void | Remove a flag by id |