Message

Overview

The Message component provides Bulma's flexible notice/message box for your Bulma React UI.

It supports color, optional headers, close buttons, custom content, and Bulma helper classes for text/background. Use it for inline feedback, status messages, alerts, or general notifications.

info

Supports Bulma color modifiers, sizes, and both header/body sections. The close button is optional and triggers your onClose callback.

---

Import

import { Message } from '@allxsmith/bestax-bulma';

---

Usage

Message with Header (per color)

To display a message box with a header, use the Message component with the color and title props. This allows you to visually distinguish messages by context—such as primary, info, success, warning, or danger—and provide a clear heading for the content. The onClose prop adds a close button for dismissible messages, and you can use Bulma helper props for further customization.

<>
  <Message color="primary" title="Primary">
    This is a primary message.
  </Message>
  <Message color="link" title="Link">
    This is a link message.
  </Message>
  <Message color="info" title="Info">
    This is an info message.
  </Message>
  <Message color="success" title="Success">
    This is a success message.
  </Message>
  <Message color="warning" title="Warning">
    This is a warning message.
  </Message>
  <Message color="danger" title="Danger">
    This is a danger message.
  </Message>
</>

---

Message Body Only (no header)

You can omit the title prop to render a message with only a body section. This is useful for simple notifications or inline feedback without a heading.

<>
  <Message color="primary">This is a primary message with no header.</Message>
  <Message color="danger">This is a danger message with no header.</Message>
</>

---

Dismissible Message

Add the onClose prop to make the message dismissible. When the close button is clicked, your callback will be triggered, allowing you to hide or remove the message from the UI.

function example() {
  const [open, setOpen] = useState(true);

  return (
    <>
      {open && (
        <Message color="info" title="Dismiss Me" onClose={() => setOpen(false)}>
          You can close this message by clicking the X button.
        </Message>
      )}
    </>
  );
}

---

Sizes

You can use Bulma size helpers or custom styles to adjust the size of the message box for different contexts.

<>
  <Message title="Default Size">This is the default size message.</Message>
  <Message title="Small">This is a small message.</Message>
  <Message title="Medium">This is a medium message.</Message>
  <Message title="Large">This is a large message.</Message>
</>

---

Compound (dot-notation) usage

The message header and body are available as the Message.Header and Message.Body statics, so a whole message can be composed from the single Message import. Each static's props are listed under Compound component props.

Complete Message with Compound Components

<Message color="info">
  <Message.Header>
    <Paragraph>Compound Component Message</Paragraph>
    <Delete aria-label="delete" />
  </Message.Header>
  <Message.Body>
    <Paragraph>
      This message is built using compound components for maximum flexibility
      and control over each section.
    </Paragraph>
    <Paragraph>
      You can include multiple paragraphs and elements in the body.
    </Paragraph>
  </Message.Body>
</Message>

Minimal Message with Body Only

<Message color="success">
  <Message.Body>
    <Paragraph>
      A simple message using only the Message.Body compound component.
    </Paragraph>
  </Message.Body>
</Message>

Header-Only Message

<Message color="warning">
  <Message.Header>
    <Paragraph>Header-only message</Paragraph>
    <Delete aria-label="delete" />
  </Message.Header>
</Message>

Mixed Approach

You can combine the traditional prop-based API with compound components:

<Message color="danger" title="Mixed Approach">
  <Message.Body bgColor="light">
    <Paragraph>
      You can mix prop-based and compound component approaches!
    </Paragraph>
    <Paragraph>
      This message uses the title prop but compound components for the body.
    </Paragraph>
  </Message.Body>
</Message>

---

Accessibility

• The message is rendered as <article class="message">.
• If onClose is provided, a close button with aria-label="delete" is rendered.
• For optimal accessibility, use clear and descriptive titles/content.

note

Always provide a visible or accessible way to dismiss important, interruptive messages.

---

Related Components

• Notification: For simpler, single-box notifications.
• Helper Props: All Bulma utility helpers can be used.

---

Additional Resources

• Bulma Message Documentation
• Storybook: Message Stories

Pro Tip

You can use all Bulma helper props with <Message /> for powerful utility-based styling.

---

Props

Prop	Type	Default	Description
className	string	—	Additional CSS classes.
title	React.ReactNode	—	Title string/node (renders header section).
textColor	Bulma color | 'inherit' | 'current'	—	Text color for the message (Bulma helper).
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'	—	Bulma color modifier for the message.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color for the message (Bulma helper).
onClose	() => void	—	Callback for the close ("X") button.
children	React.ReactNode	—	Body content for the message.
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

Subcomponents:

• Message.Header: Message header compound component. Renders a .message-header element.
• Message.Body: Message body compound component. Renders a .message-body element.

Message.Header

Prop	Type	Default	Description
className	string	—	Additional CSS classes.
children	React.ReactNode	—	Header content (title, close button, etc.).
...	All standard <div> attributes	—

Message.Body

Prop	Type	Default	Description
className	string	—	Additional CSS classes.
children	React.ReactNode	—	Message body content.
...	All standard <div> attributes	—

Compound component props

The Message component also supports a compound component API for maximum flexibility. This allows you to compose messages with fine-grained control over each section.

Message.Header

Renders the message header section with proper styling.

Props:

• className?: Additional CSS classes
• All standard HTML attributes for <div>

Message.Body

Renders the message body section.

Props:

• className?: Additional CSS classes
• All standard HTML attributes for <div>

---

CSS & Sass Variables

Message registers these variables on its own .message element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
--bulma-message-border-l-delta	$message-border-l-delta	-20%
--bulma-message-radius	$message-radius	var(--bulma-radius)
--bulma-message-header-weight	$message-header-weight	var(--bulma-weight-semibold)
--bulma-message-header-padding	$message-header-padding	1em 1.25em
--bulma-message-header-radius	$message-header-radius	var(--bulma-radius)
--bulma-message-body-border-width	$message-body-border-width	0 0 0 4px
--bulma-message-body-color	$message-body-color	var(--bulma-text)
--bulma-message-body-padding	$message-body-padding	1.25em 1.5em
--bulma-message-body-radius	$message-body-radius	var(--bulma-radius-small)
--bulma-message-body-pre-code-background-color	$message-body-pre-code-background-color	transparent
--bulma-message-header-body-border-width	$message-header-body-border-width	0
--bulma-message-h	$message-h	var(--bulma-scheme-h)
--bulma-message-s	$message-s	var(--bulma-scheme-s)
--bulma-message-background-l	$message-background-l	var(--bulma-background-l)
--bulma-message-border-l	$message-border-l	var(--bulma-border-l)
--bulma-message-border-style	$message-border-style	solid
--bulma-message-border-width	$message-border-width	0.25em
--bulma-message-color-l	$message-color-l	var(--bulma-text-l)
--bulma-message-header-background-l	$message-header-background-l	var(--bulma-dark-l)
--bulma-message-header-color-l	$message-header-color-l	var(--bulma-text-dark-invert-l)