---
type: doc
title: Alert Dialog
description: Native Liquid alert dialog with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/alert-dialog.liquid"
<div data-slot='alert-dialog'>
  <button type='button' data-slot='alert-dialog-trigger' data-button data-variant='outline'>Reset</button>
  <div data-slot='alert-dialog-portal'>
    <div data-slot='alert-dialog-overlay' hidden></div>
    <div data-slot='alert-dialog-content' hidden>
      <div data-slot='alert-dialog-header'>
        <div data-slot='alert-dialog-media'>
          <svg
            class='icon'
            data-slot='icon'
            viewBox='0 0 24 24'
            fill='none'
            stroke='currentColor'
            stroke-width='2'
            stroke-linecap='round'
            stroke-linejoin='round'
            aria-hidden='true'
            focusable='false'
          >
            <path d='M3 12a9 9 0 0 1 15.4-6.4L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-15.4 6.4L3 16'/><path d='M8 16H3v5'/>
          </svg>
        </div>
        <h3 data-slot='alert-dialog-title'>Reset the form?</h3>
        <p data-slot='alert-dialog-description'>This clears the choices in the form above.</p>
      </div>
      <div data-slot='alert-dialog-footer'>
        <button type='button' data-slot='alert-dialog-cancel' data-button data-variant='outline'>Cancel</button>
        <button
          type='button'

          data-slot='alert-dialog-action'
          data-button
          data-variant='destructive'
        >
          Reset
        </button>
      </div>
    </div>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/alert-dialog.json https://ui.full.dev/r/liquid/icon.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-triggers' %}
{% render 'ui-button' %}
{% render 'ui-runtime' %}
{% render 'ui-alert-dialog' %}
{% render 'ui-icon' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`alert-dialog-content`, `alert-dialog-description`, `alert-dialog-footer`, `alert-dialog-header`, `alert-dialog-media`, `alert-dialog-overlay`, `alert-dialog-title`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/alert-dialog.liquid) · [Theming](/liquid/docs/theming/)

## Sizes

`sm`.

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/alert-dialog.json https://ui.full.dev/r/liquid/icon.json
```