> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/13.dialog.md).

# Dialog

### Dialog Props <a href="#dialog-props" id="dialog-props"></a>

| Name                       | Type    | Default                                                                 | Description                                                                     |
| -------------------------- | ------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| backdrop                   | boolean | true                                                                    | Enables Popup backdrop (dark semi transparent layer behind)                     |
| buttons                    | string  |                                                                         | Dialog buttons content                                                          |
| colors                     | object  |                                                                         | Object with Tailwind CSS colors classes                                         |
| colors.bgIos               | string  | 'bg-white dark:bg-neutral-800'                                          | Dialog bg color in iOS theme                                                    |
| colors.bgMaterial          | string  | 'bg-md-light-surface-3 dark:bg-md-dark-surface-3'                       | Dialog bg color in iOS theme                                                    |
| colors.contentTextIos      | string  | ''                                                                      | Content text color in iOS theme                                                 |
| colors.contentTextMaterial | string  | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' | Content text color in Material theme                                            |
| colors.titleIos            | string  | ''                                                                      | Title text color in iOS theme                                                   |
| colors.titleMaterial       | string  | 'text-md-light-on-surface dark:text-md-dark-on-surface'                 | Title text color in Material theme                                              |
| component                  | string  | 'div'                                                                   | Component's HTML Element                                                        |
| content                    | string  |                                                                         | Dialog main content                                                             |
| opened                     | boolean | false                                                                   | Allows to open/close Popup and set its initial state                            |
| sizeIos                    | string  | 'w-\[16.875rem]'                                                        | Tailwind CSS size classes for iOS theme                                         |
| sizeMaterial               | string  | 'w-\[19.5rem]'                                                          | Tailwind CSS size classes for Material theme                                    |
| title                      | string  |                                                                         | Dialog title content                                                            |
| titleFontSizeIos           | string  | 'text-\[18px]'                                                          | Tailwind CSS classes for title font size iOS theme                              |
| titleFontSizeMaterial      | string  | 'text-\[24px]'                                                          | Tailwind CSS classes for title font size Material theme                         |
| translucent                | boolean | true                                                                    | Makes Dialog background translucent (with `backdrop-filter: blur`) in iOS theme |

### DialogButton Props

| Name                   | Type    | Default                                                                               | Description                                                                                            |
| ---------------------- | ------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| colors                 | object  |                                                                                       | Object with Tailwind CSS colors classes                                                                |
| colors.activeBgIos     | string  | 'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-10' | Active/pressed state bg color in iOS theme                                                             |
| colors.disabledTextIos | string  | 'text-black text-opacity-30 dark:text-white dark:text-opacity-30'                     | Disabled button text color in iOS theme                                                                |
| colors.textIos         | string  | ''text-primary                                                                        | Text color in iOS theme                                                                                |
| component              | string  | 'button'                                                                              | Component's HTML Element                                                                               |
| disabled               | boolean | false                                                                                 | Makes button disabled                                                                                  |
| strong                 | boolean | false                                                                                 | Makes button bold in iOS theme and fill in Material theme, overwrites `strongIos` and `strongMaterial` |
| strongIos              | boolean | false                                                                                 | Makes button bold in iOS theme                                                                         |
| strongMaterial         | boolean | false                                                                                 | Makes button fill in Material theme                                                                    |

### Dialog Slots

| Name    | Description            |
| ------- | ---------------------- |
| buttons | Dialog buttons content |
| content | Dialog main content    |
| title   | Dialog title content   |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Dialog" />

    <i-block strong inset class="space-y-4">
      <p>
        Dialog is a type of modal window that appears in front of app content to
        provide critical information, or prompt for a decision to be made.
      </p>
    </i-block>

    <i-block strong inset>
      <p class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <i-button rounded @click="() => (basicOpened = true)">Basic</i-button>
        <i-button rounded @click="() => (alertOpened = true)">Alert</i-button>
        <i-button rounded @click="() => (confirmOpened = true)"
          >Confirm</i-button
        >
        <i-button rounded @click="() => (listOpened = true)">List</i-button>
      </p>
    </i-block>

    <i-dialog
      :opened="basicOpened"
      @backdropclick="() => (basicOpened = false)"
    >
      <template #title>Dialog Title</template>
      Dialog is a type of modal window that appears in front of app content to
      provide critical information, or prompt for a decision to be made.

      <template #buttons>
        <i-dialog-button @click="() => (basicOpened = false)">
          Action 2
        </i-dialog-button>
        <i-dialog-button @click="() => (basicOpened = false)">
          Action 1
        </i-dialog-button>
      </template>
    </i-dialog>
    <i-dialog
      :opened="alertOpened"
      @backdropclick="() => (alertOpened = false)"
    >
      <template #title>ina-ui UI</template>
      Hello world!
      <template #buttons>
        <i-dialog-button @click="() => (alertOpened = false)"
          >Ok</i-dialog-button
        >
      </template>
    </i-dialog>
    <i-dialog
      :opened="confirmOpened"
      @backdropclick="() => (confirmOpened = false)"
    >
      <template #title>ina-ui UI</template>
      All good today?
      <template #buttons>
        <i-dialog-button @click="() => (confirmOpened = false)"
          >No</i-dialog-button
        >
        <i-dialog-button strong @click="() => (confirmOpened = false)">
          Yes
        </i-dialog-button>
      </template>
    </i-dialog>
    <i-dialog :opened="listOpened" @backdropclick="() => (listOpened = false)">
      <template #title>Your super hero</template>
      <i-list nested class="-mx-4">
        <i-list-item label title="Batman">
          <template #after>
            <i-radio
              component="div"
              value="batman"
              :checked="radioValue === 'batman'"
              @change="() => (radioValue = 'batman')"
            />
          </template>
        </i-list-item>
        <i-list-item label title="Spider-man">
          <template #after>
            <i-radio
              component="div"
              value="spiderman"
              :checked="radioValue === 'spiderman'"
              @change="() => (radioValue = 'spiderman')"
            />
          </template>
        </i-list-item>
        <i-list-item label title="Hulk">
          <template #after>
            <i-radio
              component="div"
              value="hulk"
              :checked="radioValue === 'hulk'"
              @change="() => (radioValue = 'hulk')"
            />
          </template>
        </i-list-item>
      </i-list>
      <template #buttons>
        <i-dialog-button @click="() => (listOpened = false)"
          >Confirm</i-dialog-button
        >
      </template>
    </i-dialog>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlock,
    iButton,
    iDialog,
    iDialogButton,
    iList,
    iListItem,
    iRadio,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlock,
      iButton,
      iDialog,
      iDialogButton,
      iList,
      iListItem,
      iRadio,
    },
    setup() {
      const basicOpened = ref(false);
      const alertOpened = ref(false);
      const confirmOpened = ref(false);
      const listOpened = ref(false);
      const radioValue = ref('batman');
      return {
        basicOpened,
        alertOpened,
        confirmOpened,
        listOpened,
        radioValue,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Dialog,
  DialogButton,
  Block,
  List,
  ListItem,
  Radio,
  Button,
} from 'ina-ui/react';

export default function DialogPage() {
  const [basicOpened, setBasicOpened] = useState(false);
  const [alertOpened, setAlertOpened] = useState(false);
  const [confirmOpened, setConfirmOpened] = useState(false);
  const [listOpened, setListOpened] = useState(false);
  const [radioValue, setRadioValue] = useState('batman');
  return (
    <Page>
      <Navbar
        title="Dialog"
        />

      <Block strong inset className="space-y-4">
        <p>
          Dialog is a type of modal window that appears in front of app content
          to provide critical information, or prompt for a decision to be made.
        </p>
      </Block>
      <Block strong inset>
        <p className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <Button rounded onClick={() => setBasicOpened(true)}>
            Basic
          </Button>
          <Button rounded onClick={() => setAlertOpened(true)}>
            Alert
          </Button>
          <Button rounded onClick={() => setConfirmOpened(true)}>
            Confirm
          </Button>
          <Button rounded onClick={() => setListOpened(true)}>
            List
          </Button>
        </p>
      </Block>
      <Dialog
        opened={basicOpened}
        onBackdropClick={() => setBasicOpened(false)}
        title="Dialog Title"
        content="Dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made."
        buttons={
          <>
            <DialogButton onClick={() => setBasicOpened(false)}>
              Action 2
            </DialogButton>
            <DialogButton onClick={() => setBasicOpened(false)}>
              Action 1
            </DialogButton>
          </>
        }
      />
      <Dialog
        opened={alertOpened}
        onBackdropClick={() => setAlertOpened(false)}
        title="ina-ui UI"
        content="Hello world!"
        buttons={
          <DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
        }
      />
      <Dialog
        opened={confirmOpened}
        onBackdropClick={() => setConfirmOpened(false)}
        title="ina-ui UI"
        content="All good today?"
        buttons={
          <>
            <DialogButton onClick={() => setConfirmOpened(false)}>
              No
            </DialogButton>
            <DialogButton strong onClick={() => setConfirmOpened(false)}>
              Yes
            </DialogButton>
          </>
        }
      />
      <Dialog
        opened={listOpened}
        onBackdropClick={() => setListOpened(false)}
        title="Your super hero"
        content={
          <List nested className="-mx-4">
            <ListItem
              label
              title="Batman"
              after={
                <Radio
                  component="div"
                  value="batman"
                  checked={radioValue === 'batman'}
                  onChange={() => setRadioValue('batman')}
                />
              }
            />
            <ListItem
              label
              title="Spider-man"
              after={
                <Radio
                  component="div"
                  value="spiderman"
                  checked={radioValue === 'spiderman'}
                  onChange={() => setRadioValue('spiderman')}
                />
              }
            />
            <ListItem
              label
              title="Hulk"
              after={
                <Radio
                  component="div"
                  value="hulk"
                  checked={radioValue === 'hulk'}
                  onChange={() => setRadioValue('hulk')}
                />
              }
            />
          </List>
        }
        buttons={
          <DialogButton onClick={() => setListOpened(false)}>
            Confirm
          </DialogButton>
        }
      />
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/13.dialog.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.