# Alert

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

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

Vuesax Framework

Vuesax (pronounced / vjusacksː /, as view sacks) is a UI components framework created with Vuejs to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user

Code copied

# Solid New

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

Vuesax Framework

Code copied

# Border New

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

Vuesax Framework

Code copied

# Shadow New

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

Vuesax Framework

Code copied

# Gradient New

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

Vuesax Framework

Code copied

# Relief New

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

Vuesax Framework

Code copied

# Animate

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

Vuesax Framework

Vuesax (pronunciado / vjusacksː /, como view sacks) es un framework de componentes UI creado con Vuejs para hacer proyectos fácilmente y con un estilo único y agradable, vuesax esta creado desde cero y pensado para todo tipo de desarrollador desde el amante del frontend hasta el backend que quiere crear fácilmente su enfoque visual al usuario final

Code copied

# 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 vs-alert

Vuesax Framework

Code copied

# Icon

Add an icon to the alert easily with the slot icon

Iconos por defecto

Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Vuesax Alert Icon

Code copied

# Title

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

Vuesax Alert Title

Code copied

# Hidden Content New

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

Vuesax Framework

Code copied

# Pagination New

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

Vuesax Framework

Pagina 1 - esta pagina es un slot y aquí adentro puedes agregar ya sea texto, elementos html o componentes

1 / 3

Code copied

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.

Vuesax Framework

Code copied

# Progress bar New

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

Vuesax Framework

Code copied

# Closable New

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

Vuesax Framework

Code copied

# Time Close New

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

# API

props

Property	Type	Values	Description	default	Example
v-model	boolean	boolean	Determine if the component is visible.	true	Usage Open Close
<template> <vs-button flat @click="active=!active"> {{ active ? 'Close Alert' : 'Open Alert' }} </vs-button> <vs-alert closable v-model="active"> <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert> </template> <script> export default { data:() => ({ active: true, }) } </script>
color	String	primary success danger warning dark RGB HEX	Change the color of the component and some of its sub components.	primary	Usage Open Close
`<vs-alert color="success"> <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert>`
type	boolean	solid border shadowgradientrelief	Change the style of all the alert.	default	Usage Open Close
`<vs-alert solid> <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert>`
hidden-content	boolean	boolean	With this property you can hide the content of the alert.	false	Usage Open Close
`<template> <vs-alert :hidden-content="true" > <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert> </template>`
page	Number	Number	Determine the page that is active (this property is linked to the slots="page-{n}").		Usage Open Close
`<template> <vs-alert :page="1" > <template #title> Vuesax Framework </template> <template #page-1> Page 1 - this page is a slot and here you can add either text, html elements or components </template> </vs-alert> </template>`
progress	Number	0 - 100	Add a progress bar to the alert and the value is the percentage of width.		Usage Open Close
`<vs-alert progress="70"> <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert>`
closable	boolean	boolean	Add a button to close the alert (it is necessary to use v-model).	false	Usage Open Close
<template> <vs-button flat @click="active=!active"> {{ active ? 'Close Alert' : 'Open Alert' }} </vs-button> <vs-alert closable v-model="active"> <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert> </template> <script> export default { data:() => ({ active: true, }) } </script>

slots

Property	Type	Values	Description	Example
icon	slot		Add an icon to the alert.	Usage Open Close
<template> <vs-alert> <template #icon> <i class='bx bxs-chat'></i> </template> <template #title> Vuesax Alert Icon </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert> </template>
title	slot		Add a title to the alert.	Usage Open Close
`<template> <div class="center"> <vs-alert> <template #title> Vuesax Alert Title </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user </vs-alert> </div> </template>`
page-{n}	slot	(page-1 - page-{n})	Add the pages to the alert component if it is page one would be (slot="page-1").	Usage Open Close
`<template> <vs-alert :page.sync="page" > <template #title> Vuesax Framework </template> <template #page-1> Page 1 - this page is a slot and here you can add either text, html elements or components </template> </vs-alert> </template>`
footer	slot		Add a footer to the alert component.	Usage Open Close
<vs-alert> <template #title> Vuesax Framework </template> Vuesax (pronounced / vjusacksː /, as view sacks) is a <b>UI components framework</b> created with <a href="https://vuejs.org/">Vuejs</a> to make projects easily and with a Unique and pleasant style, Vuesax is created from scratch and designed for all types of developed from the frontend lover to the backend that wants to easily create your visual approach to the end user <template #footer> <vs-button flat> Cancel </vs-button> <vs-button> Accept </vs-button> </template> </vs-alert>

Button Loading

# Alert

# Default

# Solid New

# Border New

# Shadow New

# Gradient New

# Relief New

# Animate

# Color

# Icon

# Title

# Hidden Content New

# Pagination New

# footer New

# Progress bar New

# Closable New

# Time Close New

# API