Winnie CSS
  1. Primitives
  2. dialog

dialog

An interactive element that opens on top of the page content.

Delete Dish

Are you sure you want to delete Margarita Pizza? 

<dialog data-component="dialog" data-size="sm">
  <h3 data-slot="title">Delete Dish</h3>
  <p data-slot="description">
    Are you sure you want to delete Margarita Pizza?
  </p>
  <footer data-component="footer">
    <button
      data-component="button"
      data-slot="cancel"
      data-accent-color="grey"
      data-variant="4"
    >
      Cancel
    </button>
    <button
      data-component="button"
      data-slot="action"
      data-accent-color="red"
      data-variant="1"
    >
      Delete
    </button>
  </footer>
</dialog>

Import

Import just the dialog styles.

@import "@winnie-ui/css/spatial/dialog";
@import "@winnie-ui/css/visual/dialog";

Anatomy

Attach the appropriate data attributes in the structure below.

<dialog data-component="dialog">
  <header data-component="dialog-header">
    <button data-slot="close" />
  </header>
  <h3 data-slot="title" />
  <p data-slot="description" />
  <div data-component="dialog-content" />
  <footer data-component="footer">
    <button data-slot="cancel" />
    <button data-slot="action" />
  </footer>
</dialog>

Examples

Size

Use the data-size attribute to change the max width of the dialog.

Delete Dish

Are you sure you want to delete Margarita Pizza?

Delete Dish

Are you sure you want to delete Margarita Pizza?

Delete Dish

Are you sure you want to delete Margarita Pizza? 

<dialog data-component="dialog" data-size="<size>">
  ...
</dialog>

Header

Use the dialog-header component to add a header to the dialog.

  1. Home /
  2. Dishes /
  3. New Dish 
<dialog data-component="dialog">
  <header data-component="dialog-header">...</header>
  ...
</dialog>

Close

Use the close slot component to add a close button to the top right of the dialog.

Delete Dish

Are you sure you want to delete Margarita Pizza? 

<dialog data-component="dialog">
  <header>
    ...
    <button data-component="button" data-slot="close">
      <i class="x"></i>
    </button>
  </header>
  ...
</dialog>

Content

Use the dialog-content component to add content, like a form, to the dialog.

  1. Home /
  2. Dishes /
  3. New Dish 
<dialog data-component="dialog">
  ...
  <div data-component="dialog-content">...</header>
  ...
</dialog>

Fields

Use fields like input and textarea as the title and description slots.

  1. Home /
  2. Dishes /
  3. New Dish 
<dialog data-component="dialog">
  ...
  <input data-slot="title" />
  <textarea data-slot="description" />
  ...
</dialog>

Reference

dialog

Groups all of the parts of the dialog together.

AttributeValue
data-size"sm" | "md" | "lg"
Variable
--wui-dialog-background
--wui-dialog-border
--wui-dialog-box-shadow
--wui-dialog-color
--wui-dialog-header-border-bottom
--wui-dialog-title-color
--wui-dialog-title-font-weight
--wui-dialog-description-color
--wui-dialog-description-font-weight
--wui-dialog-footer-border-top