# BUIAlert

Alert used to give a contextual introduction to the page. By clicking on the first button, the alert is hidden and a key is recorded in localStorage indicating that it should not be shown again the next time the component is mounted. By clicking on the second button the alert is only hidden.

WARNING

The index property must be a single string and will define whether the alert should be shown or not. It will be concatenated with bui_store_alert before being written to localStorage

# Demo

# Code

<template>
  <div>
    <bui-alert
      index="alert-home"
      content="Amet consectetur adipisicing elit. Quae, molestias
      voluptates illum corporis soluta blanditiis laudantium natus
      corrupti minima eos dolorum maiores placeat. Obcaecati minima quam
      incidunt laboriosam rem eaque?"
    />
  </div>
</template>

# Custom buttons and title

You can define a title for the alert and customize the text of the buttons through the properties title, label-hide e label-no-show-again

# Demo

# Code

<template>
  <div>
    <bui-alert
      index="alert-home-1"
      title="Lorem ipsum"
      label-hide="Just hide"
      label-no-show-again="Get out forever!!!"
      content="Amet consectetur adipisicing elit. Quae, molestias
      voluptates illum corporis soluta blanditiis laudantium natus
      corrupti minima eos dolorum maiores placeat. Obcaecati minima quam
      incidunt laboriosam rem eaque?"
    />
  </div>
</template>

# Hiding the Buttons

You can hide the buttons that remove the alert from the screen by setting properties label-hide and label-no-show-again to false

# Demo

# Code

<template>
  <div>
    <bui-alert
      index="alert-home-2"
      title="Lorem ipsum"
      :label-hide="false"
      :label-no-show-again="false"
      content="Amet consectetur adipisicing elit. Quae, molestias
      voluptates illum corporis soluta blanditiis laudantium natus
      corrupti minima eos dolorum maiores placeat. Obcaecati minima quam
      incidunt laboriosam rem eaque?"
    />
  </div>
</template>

# Custom content

If you want to display custom content, simply omit the title andcontent properties and mount the html in the default slot

# Demo

# Code

<bui-alert index="alert-01">
  <p class="font-italic">Lorem ipsum</p>
  <bui-icon white name="whatsapp"/>
</bui-alert>

# API Reference

# Props

Property	Type	Default	Description
`index`	`String`	`null`	The alert will be displayed if the key contained in `index` is not found in localStorage
`title`	`String`	`null`	Alert title
`content`	`String`	`null`	Alert content
`label-hide`	`{String\|Boolean}`	`'Close'`	Label for the Close button. Set to `false` to hide it
`label-no-show-again`	`{String\|Boolean}`	`'No show again'`	Label for the button to not show again. Set to `false` to hide it

# Slots

Name	Description
`default`	Default content. The content here will overwrite the props content

← Page Icon →