Moxi Design System

# Banners

A banner displays a prominent message and related optional actions. Banners can be used to notify users in a less disruptive way than Dialogs. Also consider Snackbars for alerts that disappear automatically.

This is a banner without actions. You have lost connection to the internet. This app is offline.
Dismiss Retry
 It is now safe to turn off your computer.
Shut down
 Open Banner without Actions Open Warning Banner with Actions Open Banner with Avatar and Action 
<mx-banner :is-open="isOpenA" @mxClose="isOpenA = false">
  This is a banner without actions.
</mx-banner>
<mx-banner :is-open="isOpenB" type="warning" @mxClose="isOpenB = false">
  You have lost connection to the internet.  This app is offline.
  <div slot="actions">
    <mx-button btn-type="text">Dismiss</mx-button>
    <mx-button btn-type="text">Retry</mx-button>
  </div>
</mx-banner>
<mx-banner :is-open="isOpenC" @mxClose="isOpenC = false">
  It is now safe to turn off your computer.
  <mx-avatar slot="avatar" image-url="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" />
  <div slot="actions">
    <mx-button btn-type="text">Shut down</mx-button>
  </div>
</mx-banner>
<!-- Buttons to trigger banners -->
<mx-button
  btn-type="outlined"
  :disabled="isOpenA"
  @click="isOpenA = true"
>
  Open Banner without Actions
</mx-button>
<mx-button
  btn-type="outlined"
  :disabled="isOpenB"
  @click="isOpenB = true"
>
  Open Warning Banner with Actions
</mx-button>
<mx-button
  btn-type="outlined"
  :disabled="isOpenC"
  @click="isOpenC = true"
>
  Open Banner with Avatar and Action
</mx-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# mx-banner

# Properties

Property Attribute Description Type Default
isOpen is-open Toggles the visibility of the banner. boolean false
type type "default" \| "progress" \| "warning" 'default'

# Events

Event Description Type
mxClose Emitted after the banner closes. CustomEvent<void>

# Dependencies

# Depends on

# Graph

graph TD;
  mx-banner --> mx-avatar
  style mx-banner fill:#f9f,stroke:#333,stroke-width:4px
1
2
3

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Block Inputs →