Banner

Full-width system message at the top of the app shell.

Marmot will be read-only from 22:00 to 23:00 UTC on 2 November while the catalog is upgraded to v0.9.

<mm-banner tone="info" href="/docs/releases/0.9" link-text="Read the release notes" dismissible>
  Marmot will be read-only from 22:00 to 23:00 UTC on 2 November while the catalog is upgraded to v0.9.
</mm-banner>

Guidance

The system banner runs full width across the top of the app shell for messages that apply to the whole instance, such as the server-configured banner in Marmot OSS or planned maintenance. An icon, one sentence, an optional link and an optional dismiss button, on a soft status fill or mm-sunken, closed by a hairline rule. No stripe. One banner at a time.

It is a labelled region, so people can jump to it. With dismissible, the close button fires mm-dismiss and hides the banner unless cancelled; persist the choice yourself.

Properties

Property	Attribute	Type	Default	Description
tone	tone	BannerTone	'info'	info (default), warning or danger.
surface	surface	'soft' | 'sunken'	'soft'	soft status fill (default) or sunken, for quieter notices.
href	href	string	''	Optional link URL, e.g. the status page or release notes.
linkText	link-text	string	''	Link text, e.g. "Read the release notes".
dismissible	dismissible	boolean	false	Shows a close button that fires mm-dismiss.
label	label	string	''	Accessible name of the region. Defaults to "System message".

Methods

Method	Description
dismiss()	Dismisses the banner as if the close button were pressed.

Events

Event	Detail	Description
mm-dismiss	CustomEvent<{ tone: string }>	The close button was activated. Cancel it to keep the banner.

Slots

Slot	Description
Default	The message.

CSS parts

Part	Description
banner	The bar.
icon	The status icon.
message	The message.
link	The link.
dismiss	The close button.

Examples

Every state of mm-banner in Storybook, with keyboard and screen reader tests.