Alert

Default

Easily generate an alert with this component apart from functionalities such as hiding it and showing it color change and title icons among other things

Code copied

<template>
  <div class="center">
    <s-alert>
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Solid

You can change the style of the component by adding the solid property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-alert type="solid">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Border

You can change the style of the component by adding the border property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-alert type="border">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Shadow

You can change the style of the component by adding the shadow property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-alert type="shadow">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Gradient

You can change the style of the component by adding the gradient property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-alert type="gradient">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Relief

You can change the style of the component by adding the relief property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-alert type="relief">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Animate

A beautiful and simple animation to show and hide the alert to the user

Code copied

<template>
  <div class="center">
    <s-button @click="active = !active">
      {{ active ? 'Close Alert' : 'Open Alert' }}
    </s-button>

    <s-alert v-model="active" closeable>
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref<boolean>(true)
</script>

<style scoped>
.s-button {

Color

Change the color of the entire alert with the color property

In this example you can click on the buttons and dynamically change the color value to display it in the component alert

Code copied

<template>
  <div class="center alert-example">
    <s-alert :color="color">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>

    <s-button
      type="flat"
      :active="color == 'primary'"
      @click="color = 'primary'"
    >
      Primary
    </s-button>
    <s-button
      color="success"
      type="flat"
      :active="color == 'success'"
      @click="color = 'success'"
    >
      Success
    </s-button>
    <s-button
      color="danger"
      type="flat"
      :active="color == 'danger'"
      @click="color = 'danger'"
    >
      Danger
    </s-button>
    <s-button
      color="warn"
      type="flat"
      :active="color == 'warn'"
      @click="color = 'warn'"
    >
      Warn
    </s-button>
    <s-button
      color="dark"
      type="flat"
      :active="color == 'dark'"
      @click="color = 'dark'"
    >
      Dark
    </s-button>
    <s-button
      color="#7d33ff"
      type="flat"
      :active="color == '#7d33ff'"
      @click="color = '#7d33ff'"
    >
      HEX
    </s-button>
    <s-button
      color="rgb(59,222,200)"
      type="flat"
      :active="color == 'rgb(59,222,200)'"
      @click="color = 'rgb(59,222,200)'"
    >
      RGB
    </s-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref<string>('danger')
</script>

<style scoped lang="scss">
.alert-example {

    transform: translate(0, -5px);
    border-radius: 0px 0px 12px 12px;
  }
}
</style>

Icon

Add an icon to the alert easily with the slot icon

Default icons

Sax Design Vue renders build-time Iconify SVG data. Built-in controls, such as close buttons in Alert or Popup, use SVG icons and require no external icon font. Use the #icon slot when a product needs another icon.

Find and use icons

Search Boxicons for a collection and copy its prefix:name value into SIcon.

Code copied

<template>
  <div class="center">
    <s-alert>
      <template #icon>
        <s-icon  name="bxs:chat" />
      </template>
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Title

You can add a descriptive title to the alert with the slot="title"

Code copied

<template>
  <div class="center">
    <s-alert>
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Hidden Content Update

You can hide the content of an alert and just leave the title to display the content dynamically.

This prop can bind with v-model:hidden-content

Code copied

<template>
  <div class="center">
    <s-alert v-model:hidden-content="hidden">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const hidden = ref<boolean>(true)
</script>

Pagination

There are times when we need to show a lot of content to the user but we don’t want to extend the text and make the alert very large and tall

Code copied

<template>
  <div class="center">
    <s-alert v-model:page="page">
      <template #title> Sax Design Vue </template>

      <template #page-1>
        Page 1 - this page is a slot and in here you can add either text, html
        elements or components
      </template>

      <template #page-2>
        Page 2 - In this other page you can also put what you need and it is
        dynamic, so you can add as many pages as you need
      </template>

      <template #page-3>
        Page 3 - this is the last page of the example
      </template>
    </s-alert>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const page = ref<number>(1)
</script>

footer

Use the footer slot to add a footer to the alert where for example you can add interactions with the user such as a button or a checkbox.

Code copied

<template>
  <div class="center">
    <s-alert>
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
      <template #footer>
        <s-button type="flat"> Cancel </s-button>
        <s-button> Accept </s-button>
      </template>
    </s-alert>
  </div>
</template>

Progress bar

You can add a progress bar to the alert with the progress property and a number of (0 - 100)

Code copied

<template>
  <div class="center">
    <s-alert progress="70">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

Closable

You can add a close alert icon with the closable property, the property is a boolean so you can add it without any value.

Code copied

<template>
  <div class="center">
    <s-button flat @click="active = !active">
      {{ active ? 'Close Alert' : 'Open Alert' }}
    </s-button>

    <s-alert v-model="active" closable>
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const active = ref<boolean>(true)
</script>

Time Close

If you need an alert to have time to hide, you can do so by joining some properties and few lines of code

Code copied

<template>
  <div class="center">
    <s-button flat @click="active = true">Open Alert 10s</s-button>
    <s-alert v-model="active" :progress="progress">
      <template #title> Sax Design Vue </template>
      Sax Design Vue is a <b>Vue 3 component library</b> with expressive
      visuals, practical APIs, and consistent interaction patterns for product
      interfaces.
    </s-alert>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const active = ref<boolean>(false)
const time = ref<number>(6000)
const progress = ref<number>(0)

watch(active, (val: boolean) => {
  if (val) {
    const interval = setInterval(() => {
      progress.value++
    }, time.value / 100)

    setTimeout(() => {
      active.value = false
      clearInterval(interval)
      progress.value = 0
    }, time.value)
  }
})
</script>

API