Appearance
Notification
The FTNotification component replaces the standard html button with a design theme and a multitude of options.
Usage
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
WARNING
Don't forget to import the css for ft-notifications More info here
Composition api (script setup)
vue
<script setup lang="ts">
import { useFTNotification } from '@fasttrack-solutions/vue-components-lib';
const { notification } = useFTNotification();
</script><script setup lang="ts">
import { useFTNotification } from '@fasttrack-solutions/vue-components-lib';
const { notification } = useFTNotification();
</script>Minimal usage
INFO
vue
<script lang="ts" setup>
const sendNotification = (state) => {
const newNotification = notification({
state,
title: 'Notification title',
message: 'Notification message here'
});
// newNotification.close() can be used to close an notification
}
</script>
<template>
<FTButton info @click="sendNotification('information')">Information</FTButton>
<FTButton error @click="sendNotification('critical')">Critical</FTButton>
<FTButton warning @click="sendNotification('warning')">Warning</FTButton>
<FTButton success @click="sendNotification('success')">success</FTButton>
</template><script lang="ts" setup>
const sendNotification = (state) => {
const newNotification = notification({
state,
title: 'Notification title',
message: 'Notification message here'
});
// newNotification.close() can be used to close an notification
}
</script>
<template>
<FTButton info @click="sendNotification('information')">Information</FTButton>
<FTButton error @click="sendNotification('critical')">Critical</FTButton>
<FTButton warning @click="sendNotification('warning')">Warning</FTButton>
<FTButton success @click="sendNotification('success')">success</FTButton>
</template>With progressbar
INFO
vue
<script lang="ts" setup>
const sendNotification = (state) => {
notification({
state,
duration: 3500,
progressBar: true,
title: 'Notification title',
message: 'Notification message here'
})
}
</script>
<template>
<FTButton info @click="sendNotificationWithProgressBar('information')">Information</FTButton>
<FTButton error @click="sendNotificationWithProgressBar('critical')">Critical</FTButton>
<FTButton warning @click="sendNotificationWithProgressBar('warning')">Warning</FTButton>
<FTButton success @click="sendNotificationWithProgressBar('success')">success</FTButton>
</template><script lang="ts" setup>
const sendNotification = (state) => {
notification({
state,
duration: 3500,
progressBar: true,
title: 'Notification title',
message: 'Notification message here'
})
}
</script>
<template>
<FTButton info @click="sendNotificationWithProgressBar('information')">Information</FTButton>
<FTButton error @click="sendNotificationWithProgressBar('critical')">Critical</FTButton>
<FTButton warning @click="sendNotificationWithProgressBar('warning')">Warning</FTButton>
<FTButton success @click="sendNotificationWithProgressBar('success')">success</FTButton>
</template>With action
INFO
vue
<script lang="ts" setup>
const sendNotification = (state) => {
notification({
state,
title: 'Notification title',
message: 'Notification message here',
action: {
label: 'Button label',
callback: () => { alert('Notification clicked') },
},
})
}
</script>
<template>
<FTButton info @click="sendNotificationAction('information')">Information</FTButton>
<FTButton error @click="sendNotificationAction('critical')">Critical</FTButton>
<FTButton warning @click="sendNotificationAction('warning')">Warning</FTButton>
<FTButton success @click="sendNotificationAction('success')">success</FTButton>
</template><script lang="ts" setup>
const sendNotification = (state) => {
notification({
state,
title: 'Notification title',
message: 'Notification message here',
action: {
label: 'Button label',
callback: () => { alert('Notification clicked') },
},
})
}
</script>
<template>
<FTButton info @click="sendNotificationAction('information')">Information</FTButton>
<FTButton error @click="sendNotificationAction('critical')">Critical</FTButton>
<FTButton warning @click="sendNotificationAction('warning')">Warning</FTButton>
<FTButton success @click="sendNotificationAction('success')">success</FTButton>
</template>Props
| Name | Default | Description |
|---|---|---|
state | information | What type of notification to show, colors and icons will change based on state |
title | empy | The title of the notification |
message | empty | And optional notification message |
duration | indefinitely | The duration in ms to show notification |
progressBar | false | Display a progressbar matching the duration |
pauseOnHover | false | Pause the progress on hover |
action | undefined | Display an optional CTA on notification |
Action
| Name | Default | Description |
|---|---|---|
label | information | Button text |
callback | empty | Callback to be triggered on clicks |
closeOnClick | false | Dismiss notification on click |
CSS
| Name | Default |
|---|---|
--ft-notification-title-color | 2c2c2c |
--ft-notification-text-color | 2c2c2c |
--ft-notification-border-width | 0 |
--ft-notification-padding | 16px 20px |
--ft-notification-border-radius | 4px |
--ft-notification-button-border-radius | 40px |
--ft-notification-button-padding | 7.5px 16px |
Information
| Name | Default |
|---|---|
--ft-notification-background--information | #D8EDF9 |
--ft-notification-border--information | #105DBA |
--ft-notification-icon--information | #105DBA |
Success
| Name | Default |
|---|---|
--ft-notification-background--success | #CDEACC |
--ft-notification-border--success | #3AAA35 |
--ft-notification-icon--success | #3AAA35 |
Warning
| Name | Default |
|---|---|
--ft-notification-background--warning | #FFF6C9 |
--ft-notification-border--warning | #FCA122 |
--ft-notification-icon--warning | #FCA122 |
Critical
| Name | Default |
|---|---|
--ft-notification-background--critical | #F9D3CC |
--ft-notification-border--critical | #B80E11 |
--ft-notification-icon--critical | #B80E11 |