Types

Message

A basic message.

A basic message built with props.

List Message

A message with a list.

Pass array of items to the Message list prop.

Pass an array of items to the MessageList items prop.

Icon Message

A message can contain an icon.

You can pass an Icon name to the Message icon prop.

Dismissible Block

A message that the user can choose to hide.

Dismissible blocks do not automatically close. Use the onDismiss callback to remove the message.

States

Hidden

A message can be hidden.

Visible

A message can be set to visible to force itself to be shown.

Variations

Floating

A message can float above content that it is related to.

You can also use props to configure the markup.

Compact

A message can only take up the width of its content.

You can also use props to configure the markup.

Attached

A message can be formatted to attach itself to other content.

Info

A message may be formatted to display information.

You can also use props to configure the markup.

Warning

A message may be formatted to display warning message.

You can also use props to configure the markup.

Positive/Success

A message may be formatted to display a positive message.

You can also use props to configure the markup.

Negative/Error

A message may be formatted to display a negative message.

You can also use props to configure the markup.

Colored

A message can be formatted to be different colors.

Size

A message can have different sizes.

This is the bottom