Moxi Design System

# Dialogs

The mx-dialog component is used to inform users about a task and can contain critical information, require decisions, or involve multiple tasks. For more complex UI, a Modal may be preferrable. If user interruption is not strictly required, consider using a Banner or Snackbar instead.

# Simple dialogs via methods

Currently, mx-dialog exposes two methods: alert() and confirm(), which are intended to be replacements for Window.alert() (opens new window) and Window.confirm() (opens new window) respectively. The signatures for these two methods are identical, but with different default values for confirmLabel and cancelLabel (to match the behavior of the aforementioned Window methods).

For simple dialogs without markup, it is possible to use a single instance of the mx-dialog element to invoke every dialog needed for the page.

Basic Alert Call Advanced Alert Call Basic Confirm Call Advanced Confirm Call 
<mx-button @click="() => $refs.dialog.alert('Greetings!')">Basic Alert Call</mx-button>
<mx-button @click="advancedAlert">Advanced Alert Call</mx-button>
<mx-button @click="confirmation">Basic Confirm Call</mx-button>
<mx-button @click="advancedConfirmation">Advanced Confirm Call</mx-button>
<mx-dialog ref="dialog" />
1
2
3
4
advancedAlert() {
  const options = { heading: 'Alert!', confirmLabel: 'Okey dokey'}
  this.$refs.dialog.alert('This alert has a heading and a custom confirmation button label.', options)
},
async confirmation() {
  const confirmed = await this.$refs.dialog.confirm('Are you sure about this?')
  this.$refs.dialog.alert(confirmed ? 'You clicked OK.' : 'You did not click OK.')
},
async advancedConfirmation() {
  const options = { heading: 'Pancakes', confirmLabel: 'Yes please', cancelLabel: 'No pancakes for me'}
  const confirmed = await this.$refs.dialog.confirm('Would you like some pancakes?', options)
  this.$refs.dialog.alert(confirmed ? 'You accepted the pancakes.' : 'You declined the pancakes.')
}
1
2
3
4
5
6
7
8
9
10
11
12

# Advanced dialogs via slots

For more advanced dialog layouts, pass the markup into the default slot, as well as the heading and buttons slots, and use the isOpen prop to toggle the dialog. The dialog emits an mxClose event that may be useful to update the isOpen boolean in state.

Open Dialog Create new audience with selected

4,800 contacts will be added to this audience.

We only wear jeans or track pants on Friday. You can’t wear a tank top two days in a row. You can only wear your hair in a ponytail once a week. So, I guess, you picked today. And if you break any of these rules you can’t sit with us at lunch. I mean, not just you, any of us. Like, if I was wearing jeans today, I would be sitting over there with the art freaks.

We always vote before we ask someone to eat lunch with us, because you have to be considerate of the rest of the group. I mean, you wouldn’t buy a skirt without asking your friends first if it looks good on you. It’s the same with guys. You may think you like someone, but you could be wrong.

Cancel Save & Add 
<mx-button @click="isDialogOpen = !isDialogOpen">Open Dialog</mx-button>
<mx-dialog
  :is-open.prop="isDialogOpen"
  modal-class="w-320 sm:w-480 max-h-480"
  @mxClose="isDialogOpen = false"
>
  <span slot="heading">Create new audience with selected</span>
  <mx-input label="Audience Name" />
  <p class="my-16">4,800 contacts will be added to this audience.</p>
  <p>
    We only wear jeans or track pants on Friday. You can’t wear a tank top two days in a row. You can only wear your hair in a ponytail once a week. So, I guess, you picked today. And if you break any of these rules you can’t sit with us at lunch. I mean, not just you, any of us. Like, if I was wearing jeans today, I would be sitting over there with the art freaks.
  </p>
  <p>
    We always vote before we ask someone to eat lunch with us, because you have to be considerate of the rest of the group. I mean, you wouldn’t buy a skirt without asking your friends first if it looks good on you. It’s the same with guys. You may think you like someone, but you could be wrong.
  </p>
  <div slot="buttons">
    <mx-button btn-type="text" @click="isDialogOpen = false">
      Cancel
    </mx-button>
    <mx-button btn-type="text" @click="isDialogOpen = false">
      Save &amp; Add
    </mx-button>
  </div>
</mx-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# mx-dialog

# Properties

Property Attribute Description Type Default
isOpen is-open Toggles the visibility of the dialog (when using the slots for content). boolean false
modalClass modal-class Additional classes to apply to the inner modal element. string undefined

# Events

Event Description Type
mxClose CustomEvent<void>

# Methods

# alert(message: string, { confirmLabel, cancelLabel, heading }?: DialogOptions) => Promise<void>

A Promise-based replacement for Window.alert() with some additional options

# Returns

Type: Promise<void>

# confirm(message: string, { confirmLabel, cancelLabel, heading }?: DialogOptions) => Promise<boolean>

A Promise-based replacement for Window.confirm() that resolves to a boolean

# Returns

Type: Promise<boolean>

# Dependencies

# Depends on

# Graph

graph TD;
  mx-dialog --> mx-button
  style mx-dialog 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.

← Dropdowns →