# modal — Examples

## basic

```html
<button-ui text="Open Modal" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
<modal-ui text="Confirm Action">
  <p>Are you sure you want to proceed? This action requires your confirmation.</p>
  <div slot="footer" style="display:flex; gap:var(--a-space-2); justify-content:flex-end;">
    <button-ui text="Cancel" variant="ghost" onclick="this.closest('modal-ui').open=false"></button-ui>
    <button-ui text="Confirm" variant="primary" onclick="this.closest('modal-ui').open=false"></button-ui>
  </div>
</modal-ui>
```

## size

```html
<button-ui text="Small" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
<modal-ui text="Small Modal" size="sm">
  <p>A compact modal for simple confirmations.</p>
</modal-ui>
```

## text

```html
<button-ui text="With Title" variant="outline" onclick="this.nextElementSibling.open=true"></button-ui>
<modal-ui text="Edit Profile">
  <div style="display:flex; flex-direction:column; gap:var(--a-space-3);">
    <field-ui label="Name">
      <input-ui placeholder="Your name"></input-ui>
    </field-ui>
    <field-ui label="Email">
      <input-ui placeholder="you@example.com"></input-ui>
    </field-ui>
  </div>
  <div slot="footer" style="display:flex; gap:var(--a-space-2); justify-content:flex-end;">
    <button-ui text="Cancel" variant="ghost" onclick="this.closest('modal-ui').open=false"></button-ui>
    <button-ui text="Save" variant="primary" onclick="this.closest('modal-ui').open=false"></button-ui>
  </div>
</modal-ui>
```
