Appearance
Alert
The FTAlert component displays a notification box with different colors based on its state. It accepts several props to customize its appearance and behavior.
Usage
Composition api (script setup)
vue
<script setup lang="ts">
import { FTAlert } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTAlert } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTAlert } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTAlert
}
}
</script><script>
import { FTAlert } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTAlert
}
}
</script>Text
Alerts
Hello from info
Hello from success
Hello from warning
Hello from critical
vue
<template>
<FTAlert text="Hello from info" :info="true"></FTAlert>
<FTAlert text="Hello from success" :success="true"></FTAlert>
<FTAlert text="Hello from warning" :warning="true"></FTAlert>
<FTAlert text="Hello from critical" :critical="true"></FTAlert>
</template><template>
<FTAlert text="Hello from info" :info="true"></FTAlert>
<FTAlert text="Hello from success" :success="true"></FTAlert>
<FTAlert text="Hello from warning" :warning="true"></FTAlert>
<FTAlert text="Hello from critical" :critical="true"></FTAlert>
</template>Title
Alerts
Hello
Hello from info
Hello
Hello from success
Hello
Hello from warning
Hello
Hello from critical
vue
<template>
<FTAlert title="Hello" text="Hello from info" :info="true"></FTAlert>
<FTAlert title="Hello" text="Hello from success" :success="true"></FTAlert>
<!--OR USING SLOTS -->
<FTAlert warning>
<template #title>
Hello
</template>
<template #text>
Hello from warning
</template>
</FTAlert>
<FTAlert critical>
<template #title>
Hello
</template>
<template #text>
Hello from critical
</template>
</FTAlert>
</template><template>
<FTAlert title="Hello" text="Hello from info" :info="true"></FTAlert>
<FTAlert title="Hello" text="Hello from success" :success="true"></FTAlert>
<!--OR USING SLOTS -->
<FTAlert warning>
<template #title>
Hello
</template>
<template #text>
Hello from warning
</template>
</FTAlert>
<FTAlert critical>
<template #title>
Hello
</template>
<template #text>
Hello from critical
</template>
</FTAlert>
</template>Icons
Alerts
Hello
Hello from info
Hello
Hello from success
Hello
Hello from warning
Hello
Hello from critical
vue
<template>
<FTAlert title="Hello" info>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from info
</template>
</FTAlert>
<FTAlert title="Hello" success>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from success
</template>
</FTAlert>
<FTAlert title="Hello" warning>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from warning
</template>
</FTAlert>
<FTAlert title="Hello" critical>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from critical
</template>
</FTAlert>
</template><template>
<FTAlert title="Hello" info>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from info
</template>
</FTAlert>
<FTAlert title="Hello" success>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from success
</template>
</FTAlert>
<FTAlert title="Hello" warning>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from warning
</template>
</FTAlert>
<FTAlert title="Hello" critical>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from critical
</template>
</FTAlert>
</template>Dynamic State
Alerts
Hello
Hello from state
vue
<script setup>
import { computed } from 'vue';
const dynamicState = computed(() => {
return 'info'
})
</script>
<template>
<FTAlert title="Hello" :state="dynamicState">
<template #text>
Hello from state
</template>
</FTAlert>
</template><script setup>
import { computed } from 'vue';
const dynamicState = computed(() => {
return 'info'
})
</script>
<template>
<FTAlert title="Hello" :state="dynamicState">
<template #text>
Hello from state
</template>
</FTAlert>
</template>Actions
Alerts
Hello
Hello from info
Hello
Hello from success
Hello
Hello from warning
Hello
Hello from critical
vue
<template>
<FTAlert title="Hello" info>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from info
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton info>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" success>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from success
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" warning>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from warning
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton warning>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" critical>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from critical
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
</template><template>
<FTAlert title="Hello" info>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from info
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton info>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" success>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from success
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" warning>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from warning
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton warning>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" critical>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from critical
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
</template>Closeable
Alerts
Hello
Hello from info
Hello
Hello from success
Hello
Hello from warning
Hello
Hello from critical
vue
<template>
<FTAlert title="Hello" info closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from info
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton info>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" success closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from success
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" warning closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from warning
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton warning>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" critical closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from critical
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
</template><template>
<FTAlert title="Hello" info closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from info
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton info>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" success closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from success
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" warning closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from warning
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
<FTButton warning>Take action</FTButton>
</template>
</FTAlert>
<FTAlert title="Hello" critical closable>
<template #icon>
<fa :icon="['fad', 'rocket-launch']" />
</template>
<template #text>
Hello from critical
</template>
<template #actions>
<FTButton tertiary>Take action</FTButton>
</template>
</FTAlert>
</template>Props
In addition to the standard attributes supported by HTML FTAlert accepts custom helper props
| Name | Default | Description |
|---|---|---|
info | false | Display an info notification. |
success | false | Display a success notification. |
warning | false | Display a warning notification. |
critical | false | Display an critical notification. |
state | '' | Display a custom notification with a specified state. |
title | '' | Title of the alert. |
text | '' | Body text for the alert. |
Slots
| Name | Description |
|---|---|
title | Displays a title |
text | Displays text content. |
icon | An icon to display next to the alert text. |
actions | Slot for displaying additional actions. |