Broadcast message

Examples

View in Pajamas UI Kit →

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

• At the top of every page.
• 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".