Broadcast message
Delivers an instance-level announcement from an administrator to all users.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlBroadcastMessage } from "gitlab-ui-react/broadcast-message";<GlBroadcastMessage dismissible={false}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</GlBroadcastMessage>Default
Use a broadcast message only for an administrator-authored announcement that applies across an instance. The basic example is non-dismissible so the control is not shown without a visibility handler.
import { GlBroadcastMessage } from "gitlab-ui-react/broadcast-message";
export default function BroadcastMessageExample() {
return (
<GlBroadcastMessage dismissible={false}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</GlBroadcastMessage>
);
}
Dismissible messages
Allow dismissal when the administrator has enabled it. GlBroadcastMessage reports the action through onDismiss but does not hide itself, so the parent must remove the message and persist the user’s choice.
import { useState } from "react";
import { GlBroadcastMessage } from "gitlab-ui-react/broadcast-message";
import { GlButton } from "gitlab-ui-react/button";
export default function BroadcastMessageDismissibleExample() {
const [visible, setVisible] = useState(true);
if(!visible) {
return <GlButton onClick={() => setVisible(true)}>Show message again</GlButton>;
}
return (
<GlBroadcastMessage onDismiss={() => setVisible(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</GlBroadcastMessage>
);
}
Types
Use the banner type for an instance-wide announcement at the top of the static panel. The notification type uses a compact layout and always includes a dismiss button, even when dismissible is false.
Admin message
Lorem ipsum dolor sit amet, consectetur adipiscing elit.import { useState } from "react";
import { GlBroadcastMessage } from "gitlab-ui-react/broadcast-message";
import { GlButton } from "gitlab-ui-react/button";
export default function BroadcastMessageTypesExample() {
const [notificationVisible, setNotificationVisible] = useState(true);
return (
<div className="grid gap-3">
<GlBroadcastMessage dismissible={false} type="banner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</GlBroadcastMessage>
{notificationVisible ? (
<GlBroadcastMessage
onDismiss={() => setNotificationVisible(false)}
type="notification">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</GlBroadcastMessage>
) : (
<GlButton onClick={() => setNotificationVisible(true)}>
Show notification again
</GlButton>
)}
</div>
);
}
Themes
The administrator can choose a background theme from the supported swatches. Theme is a visual choice rather than a severity scale, and notification messages do not use it visually.
import { GlBroadcastMessage } from "gitlab-ui-react/broadcast-message";
export default function BroadcastMessageThemesExample() {
return (
<div className="grid gap-3">
<GlBroadcastMessage dismissible={false} theme="indigo">
<strong>Indigo theme:</strong> Lorem ipsum dolor sit amet.
</GlBroadcastMessage>
<GlBroadcastMessage dismissible={false} theme="blue">
<strong>Blue theme:</strong> Lorem ipsum dolor sit amet.
</GlBroadcastMessage>
<GlBroadcastMessage dismissible={false} theme="green">
<strong>Green theme:</strong> Lorem ipsum dolor sit amet.
</GlBroadcastMessage>
<GlBroadcastMessage dismissible={false} theme="red">
<strong>Red theme:</strong> Lorem ipsum dolor sit amet.
</GlBroadcastMessage>
</div>
);
}
Accessibility
- Insert broadcast messages in the natural DOM and reading order; place banners at the top of the static panel.
- Keep content short and make links understandable from their visible text.
- Provide a localized
dismissLabelwhenever a dismiss button is shown. - Handle
onDismissand remove the message. Do not present a close control that has no effect. - Do not use color alone to communicate the announcement’s meaning.
- Use an alert instead for a system-generated, contextual, and timely message.
API
These are the component-specific props. GlBroadcastMessage also forwards supported div attributes and a ref.
| Prop | Description | Default |
|---|---|---|
type |
Sets the layout to banner or notification. Notifications always show a dismiss button. |
"banner" |
theme |
Sets indigo, light-indigo, blue, light-blue, green, light-green, red, light-red, dark, or light. |
"indigo" |
dismissible |
Shows the dismiss button for banner messages. | true |
dismissLabel |
Sets the dismiss button’s accessible label. | "Dismiss" |
onDismiss |
Runs when dismissal is requested; the parent controls visibility. | — |
iconName |
Sets the leading icon from the GitLab SVG library. | "bullhorn" |
children |
Provides the announcement content. | — |