Broadcast message

A broadcast message delivers an instance level message from the admin to all users.

Examples

Default broadcast message
Loading story...

View in Pajamas UI Kit →

Structure

Numbered diagram of the broadcast message structure
  1. Container: Wraps the content.
  2. Icon: The bullhorn icon indicates an announcement.
  3. Message: Text content indicating the purpose.
  4. Dismiss button (optional): Permanently removes the broadcast message for a user.

Guidelines

When to use

  • Make an announcement or provide a notification from an admin to all users within a single instance.

When not to use

  • If you need to provide a system generated, contextual, and timely message to a user, use an alert instead.
  • If you are immediately confirming a user's action while they remain in the same view, use a toast instead.

Appearance

Background color is chosen by the admin from a set of swatches when creating the broadcast message.

Behavior

Expires after a set period defined by the admin, but may also be dismissed by a user if the dismiss setting is enabled by the admin.

Content

Contains a small amount of text content that uses the container width when user preference is set to use a fixed width layout.

Placement

  • Located at the top of the page, above the global navigation.
  • Multiple broadcast messages stack vertically.

Accessibility

  • Part of the DOM order on load, and should flow in the natural reading order.
  • The dismiss button uses aria-label="Dismiss".

Last updated at: