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>

With multiple actions ​

Use actions to render secondary text links alongside the primary action button. Actions in the actions array render as text links by default.

INFO

vue
<script lang="ts" setup>
  const sendNotification = (state) => {
    notification({
      state,
      title: 'Notification title',
      message: 'Notification message here',
      action: {
        label: 'Primary',
        callback: () => { alert('Primary clicked') },
        closeOnClick: true,
      },
      actions: [
        {
          label: 'Undo',
          callback: () => { alert('Undo clicked') },
          closeOnClick: true,
        },
      ],
    })
  }
</script>
<script lang="ts" setup>
  const sendNotification = (state) => {
    notification({
      state,
      title: 'Notification title',
      message: 'Notification message here',
      action: {
        label: 'Primary',
        callback: () => { alert('Primary clicked') },
        closeOnClick: true,
      },
      actions: [
        {
          label: 'Undo',
          callback: () => { alert('Undo clicked') },
          closeOnClick: true,
        },
      ],
    })
  }
</script>

With text-only action ​

Use actions with type: 'text' when you only need a text link without a primary button.

INFO

vue
<script lang="ts" setup>
  const sendNotification = (state) => {
    notification({
      state,
      title: 'Notification title',
      message: 'Notification message here',
      actions: [
        {
          label: 'Undo',
          type: 'text',
          callback: () => { alert('Undo clicked') },
          closeOnClick: true,
        },
      ],
    })
  }
</script>
<script lang="ts" setup>
  const sendNotification = (state) => {
    notification({
      state,
      title: 'Notification title',
      message: 'Notification message here',
      actions: [
        {
          label: 'Undo',
          type: 'text',
          callback: () => { alert('Undo clicked') },
          closeOnClick: true,
        },
      ],
    })
  }
</script>

Props ​

NameDefaultDescription
stateinformationWhat type of notification to show, colors and icons will change based on state
titleempyThe title of the notification
messageemptyAnd optional notification message
durationindefinitelyThe duration in ms to show notification
progressBarfalseDisplay a progressbar matching the duration
pauseOnHoverfalsePause the progress on hover
actionundefinedDisplay an optional primary CTA button on notification
actionsundefinedArray of secondary actions rendered as text links before the primary button

Action ​

NameDefaultDescription
labelemptyButton/link text
callbackemptyCallback to be triggered on clicks
closeOnClickfalseDismiss notification on click
type'text'Render style: 'button' for a filled button, 'text' for a text link. The action prop always renders as 'button' regardless of this value

CSS ​

NameDefault
--ft-notification-title-color2c2c2c
--ft-notification-text-color2c2c2c
--ft-notification-border-width0
--ft-notification-padding16px 20px
--ft-notification-border-radius4px
--ft-notification-button-border-radius40px
--ft-notification-button-padding7.5px 16px

Information ​

NameDefault
--ft-notification-background--information#D8EDF9
--ft-notification-border--information#105DBA
--ft-notification-icon--information#105DBA

Success ​

NameDefault
--ft-notification-background--success#CDEACC
--ft-notification-border--success#3AAA35
--ft-notification-icon--success#3AAA35

Warning ​

NameDefault
--ft-notification-background--warning#FFF6C9
--ft-notification-border--warning#FCA122
--ft-notification-icon--warning#FCA122

Critical ​

NameDefault
--ft-notification-background--critical#F9D3CC
--ft-notification-border--critical#B80E11
--ft-notification-icon--critical#B80E11

Copyright © Fast Track Solutions