Message card

Message card communicates brief messages about non-ephemeral states that affect the current page or section, with optional call to actions.

Examples

Some services are not supported in this project.

Contents

UsageAnatomyAPIs

Usage

Do

  • Use a message card to communicate a non-ephemeral state that affects the current screen or section
  • Use a message card for scenarios important enough to be visible until the user takes action, or the situation resolves itself
  • Keep the text within the card short
  • Use action buttons instead of hyperlinks, if needed

Don't

  • Display as a result of user action — use a toast notification instead
  • Use to display information that affects to the system overall
  • Use for teaching users about new features
  • Use for confirmation
  • Make dismissable if the content remains relevant to the user while they navigate
  • Have more that 2 actions in a single message card

Anatomy

Card Anatomy

Message

The main part of the message bar.

Message area alignment

Messages area has a min-height of 32px, with the text being centered vertically. For messages that don't fit a single line, the area auto-expands.

Icon

Icons are placed at the beginning of the bar, rendered at 16x16 or 32x32 sizes. Icons are vertically centered in the card.

Action area

Optional buttons may be placed as call-to-actions, vertically centered. A dismiss icon button may be placed at the end of the card.

Placement

Card Anatomy Placement

Message cards respect the content area padding and may show up as the page loads, or at a later time on demand.

Message cards stay visible indefinitely while in the page, but may include a “Dismiss” icon button that hides them.

Responsive rendering

Card Anatomy Responsive

Examples of message cards

Information

Card Anatomy Information

Warning

Card Anatomy Warning

Error

Card Anatomy Error

APIs

MessageCardSeverity

Info"Info"
string
Warning"Warning"
string
Error"Error"
string

IMessageCardProps

buttonProps
IButtonProps[]
Optional props for custom buttons
className
string
Optional custom class name
iconProps
IIconProps
Optional override icon props Default value depends on @see severity
messageBarClassName
string
Optional class name to emit onto the internal message bar
onDismiss
() => void
Optional handler for any dismissal of the button
role
"alert" | "banner"
Optional role prop If not set, will default to alert for Error or Warning severity levels @see severity
severityInfo
MessageCardSeverity
Severity for the MessageBar - regulates color and default icon