Getting Started

Foundations

Accessibility

Layout

CSS Utilities

Message

Introduction

Using messages to communicate between system and users, to notify or to show the system's responses to user’s actions.

Heading - Like a message title, using heading for message overview purpose.
Message - The information that the system wants to send to users. Message content can include paragraphs and links.
Close button - Optional to close the message immediately.
CTA button - Designed for system messages only. CTA button is the main action that users can interact with a system message.
Background - The message background attribute specifies the message variants by color changing.

Examples

Types

Form messages

Form messages are alerts that provide contextual feedback messages for user actions with input forms. It's available for any length of text, as well as an optional dismiss button.

<Message>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>
      This is a message-check it out!
    </Message.Content>
  </Message.Container>
</Message>

<Message>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>
      This is a message-check it out!
    </Message.Content>
  </Message.Container>
</Message>

System messages

System messages provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. It's available for any length of text, a CTA button, as well as an optional dismiss button.

<Message type="system" dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>This is a message-check it out!</Message.Content>
    <div className="u-marginTopSmall">
      <Button variant="secondary" size="small">CTA</Button>
    </div>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>This is a message-check it out!</Message.Content>
    <div className="u-marginTopSmall">
      <Button variant="secondary" size="small">CTA</Button>
    </div>
  </Message.Container>
</Message>

Variants

Form messages

<>
  <Message variant="information">
    <Message.Container>
      <Message.Title>
        Information
      </Message.Title>
      <Message.Content>
        This is a primary alert which give more information for users.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message variant="warning">
    <Message.Container>
      <Message.Title>
        Warning
      </Message.Title>
      <Message.Content>
        Used to help users avoid error situations. Consists of a description of potential errors.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message variant="positive">
    <Message.Container>
      <Message.Title>
        Positive
      </Message.Title>
      <Message.Content>
        Provides a positive response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message variant="negative">
    <Message.Container>
      <Message.Title>
        Negative
      </Message.Title>
      <Message.Content>
        Shown when something goes wrong, or provide a negative response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
</>

<>
  <Message variant="information">
    <Message.Container>
      <Message.Title>
        Information
      </Message.Title>
      <Message.Content>
        This is a primary alert which give more information for users.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message variant="warning">
    <Message.Container>
      <Message.Title>
        Warning
      </Message.Title>
      <Message.Content>
        Used to help users avoid error situations. Consists of a description of potential errors.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message variant="positive">
    <Message.Container>
      <Message.Title>
        Positive
      </Message.Title>
      <Message.Content>
        Provides a positive response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message variant="negative">
    <Message.Container>
      <Message.Title>
        Negative
      </Message.Title>
      <Message.Content>
        Shown when something goes wrong, or provide a negative response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
</>

System messages

<>
  <Message type="system" variant="information">
    <Message.Container>
      <Message.Title>
        Information
      </Message.Title>
      <Message.Content>
        This is a primary alert which give more information for users.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message type="system" variant="warning">
    <Message.Container>
      <Message.Title>
        Warning
      </Message.Title>
      <Message.Content>
        Used to help users avoid error situations. Consists of a description of potential errors.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message type="system" variant="positive">
    <Message.Container>
      <Message.Title>
        Positive
      </Message.Title>
      <Message.Content>
        Provides a positive response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message type="system" variant="negative">
    <Message.Container>
      <Message.Title>
        Negative
      </Message.Title>
      <Message.Content>
        Shown when something goes wrong, or provide a negative response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
</>

<>
  <Message type="system" variant="information">
    <Message.Container>
      <Message.Title>
        Information
      </Message.Title>
      <Message.Content>
        This is a primary alert which give more information for users.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message type="system" variant="warning">
    <Message.Container>
      <Message.Title>
        Warning
      </Message.Title>
      <Message.Content>
        Used to help users avoid error situations. Consists of a description of potential errors.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message type="system" variant="positive">
    <Message.Container>
      <Message.Title>
        Positive
      </Message.Title>
      <Message.Content>
        Provides a positive response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
  <Message type="system" variant="negative">
    <Message.Container>
      <Message.Title>
        Negative
      </Message.Title>
      <Message.Content>
        Shown when something goes wrong, or provide a negative response to user actions.
      </Message.Content>
    </Message.Container>
  </Message>
</>

Layout

<Message dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>
      This is a message-check it out!
    </Message.Content>
  </Message.Container>
</Message>

<Message dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>
      This is a message-check it out!
    </Message.Content>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>
      This is a message-check it out!
    </Message.Content>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>
      This is a message-check it out!
    </Message.Content>
  </Message.Container>
</Message>

<Message type="system">
  <Message.Container>
    <div className="u-flex u-justifyContentBetween">
      <Message.Title>
        Heading
      </Message.Title>
      <Button variant="secondary" size="small">CTA</Button>
    </div>
    <Message.Content>Message with right button</Message.Content>
  </Message.Container>
</Message>

<Message type="system">
  <Message.Container>
    <div className="u-flex u-justifyContentBetween">
      <Message.Title>
        Heading
      </Message.Title>
      <Button variant="secondary" size="small">CTA</Button>
    </div>
    <Message.Content>Message with right button</Message.Content>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>Message with bottom button</Message.Content>
    <div className="u-marginTopSmall">
      <Button variant="secondary" size="small">CTA</Button>
    </div>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>Message with bottom button</Message.Content>
    <div className="u-marginTopSmall">
      <Button variant="secondary" size="small">CTA</Button>
    </div>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <div className="u-marginLeftSmall u-marginTopSmall">
    <Icon name="notification" size="medium" />
  </div>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>This is a message-check it out! </Message.Content>
  </Message.Container>
</Message>

<Message type="system" dismissible>
  <div className="u-marginLeftSmall u-marginTopSmall">
    <Icon name="notification" size="medium" />
  </div>
  <Message.Container>
    <Message.Title>
      Heading
    </Message.Title>
    <Message.Content>This is a message-check it out! </Message.Content>
  </Message.Container>
</Message>

Design Reference

N/A

API

Message

import { Message } from '@ahaui/react'Copy import code for the Message component

Name	Type	Default	Description
type	`'form'` \| `'system'`	`'form'`	The Message visual type
variant	`'information'` \| `'positive'` \| `'warning'` \| `'negative'`	`'information'`	The Message visual variant
dismissible	boolean	`false`	Renders a properly aligned dismiss button, as well as adding extra horizontal padding to the Message.
show	boolean	`true`	controlled by: `onClose`, initial prop: `defaultShow` Controls the visual state of the Message.
onClose	function		controls `show` Callback fired when message is closed.
transition	elementType	`<Fade>`	A `react-transition-group` Transition component used to animate the Message on dismissal.

Message

Introduction#

Examples#

Types#

Form messages#

System messages#

Variants#

Form messages#

System messages#

Layout#

Design Reference#

API#

Message#

Introduction

Examples

Types

Form messages

System messages

Variants

Form messages

System messages

Layout

Design Reference

API

Message