Notification

The Notification component renders Bulma’s notification element — a bold block used to display notices or alerts.

Basic notification

This is a plain notification.

<Notification>This is a plain notification.</Notification>

Colors

Primary

Info

Success

Warning

Danger

Link

<Notification color="primary">Primary</Notification>
<Notification color="info">Info</Notification>
<Notification color="success">Success</Notification>
<Notification color="warning">Warning</Notification>
<Notification color="danger">Danger</Notification>
<Notification color="link">Link</Notification>

Light variants

Primary light

Danger light

<Notification color="primary" light>Primary light</Notification>
<Notification color="danger" light>Danger light</Notification>

Dismissible

Click the × button to dismiss this notification.

<Notification color="info" dismissible>
  Click the × button to dismiss this notification.
</Notification>

Props

Prop	Type	Default	Description
color	"link" | "primary" | "info" | "success" | "warning" | "danger"	—	Bulma color modifier.
light	boolean	—	Light variant.
dismissible	boolean	—	Adds a × delete button that removes the element.
class	string	—	Extra CSS classes.