Default
<template>
<section>
<button class="button block" @click="isActive = !isActive">Toggle</button>
<b-message title="Default" :active.sync="isActive" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
}
}
}
</script>
# Types
Default
Danger
Success
Info
Warning
<template>
<section>
<b-message title="Default" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Danger" type="is-danger" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Success" type="is-success" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Info" type="is-info" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Warning" type="is-warning" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
</section>
</template>
# Icons
Danger with icon
Success with icon
Info with icon
Warning with icon
<template>
<section>
<b-message title="Danger with icon" type="is-danger" has-icon aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Success with icon" type="is-success" has-icon aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Info with icon" type="is-info" has-icon aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Warning with icon" type="is-warning" has-icon aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur warning elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
</section>
</template>
# Headerless
Message without title becomes headerless, they are always non-closable.
<template>
<section>
<b-message>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-danger">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-danger" has-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-success">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-success" has-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-info" has-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message type="is-warning" has-icon>
Lorem ipsum dolor sit amet, consectetur warning elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
</section>
</template>
# Sizes
Small
Default
Medium
Large
<template>
<section>
<b-message title="Small" size="is-small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Medium" size="is-medium">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
<b-message title="Large" size="is-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
</section>
</template>
# Auto Close
Message will be automatically closed after duration.
<template>
<section>
<button class="button block" @click="isActive = true" :disabled="isActive">Show</button>
<b-message auto-close title="Error!" type="is-danger" has-icon :active.sync="isActive" aria-close-label="Close message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
</b-message>
</section>
</template>
<script>
export default {
data() {
return {
isActive: false
}
}
}
</script>
Name | Description | Type | Values | Default |
|---|---|---|---|---|
type | Type (color) of the message, optional | String | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | — |
active | Whether notification is active or not, use the .sync modifier to make it two-way binding | Boolean | — | true |
closable | Adds an 'X' button that closes the notification — works if has a title | Boolean | — | true |
auto-close | Hide notification after duration | Boolean | — | false |
duration | Visibility duration in miliseconds | Number | — | 2000 |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fad, fal | mdi |
has-icon | Adds an icon on the left side depending on the type | Boolean | — | false |
size | Size of the control, optional | String | is-small, is-medium, is-large | — |
icon-size | Size of the icon, optional | String | is-small, is-medium, is-large | is-large or size prop |
title | Message title | String | — | — |
aria-close-label | Label for the close button, to be read by accessibility screenreaders. | String | — | — |
This page is open source. Noticed a typo or something's unclear?