Skip to content

[6.x] Modals and Stacks #1786

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
duncanmcclean wants to merge 4 commits into
base: 6.x
Choose a base branch
from
Draft

[6.x] Modals and Stacks #1786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2d80576
Delete Stacks page in favour of Storybook docs
duncanmcclean Dec 16, 2025
5648b24
add stack component to list of ui components
duncanmcclean Dec 16, 2025
7d9ed0a
point towards modal page on storybook docs site
duncanmcclean Dec 16, 2025
d9dfe9b
wip
duncanmcclean Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 22 additions & 21 deletions content/collections/pages/all-ui-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,26 @@ id: f3c9d186-14a6-416d-89e7-28569adb2cfe
blueprint: page
title: 'All UI Components'
---
| Type | Description |
|-----------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [Badge](/ui-components/badge) | Highlight contextual information, like status, count, or related data. You can pass text through a text prop or use it like an HTML tag pair. |
| [Button](/ui-components/button) | Buttons are used to trigger actions. They come in many sizes and flavors. |
| [Calendar](/ui-components/calendar) | We'll give you 3 guesses what this is for. |
| Type | Description |
|-----------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
| [Badge](/ui-components/badge) | Highlight contextual information, like status, count, or related data. You can pass text through a text prop or use it like an HTML tag pair. |
| [Button](/ui-components/button) | Buttons are used to trigger actions. They come in many sizes and flavors. |
| [Calendar](/ui-components/calendar) | We'll give you 3 guesses what this is for. |
| [Card](/ui-components/card) | The ubiquitous container of all elements! The div of any component system. Cards can contain anything you want – content, widgets, settings, forms, you name it. |
| [Checkbox](/ui-components/checkbox) | Checkboxes are used to select multiple options from a list of options. |
| [Datepicker](/ui-components/datepicker) | Pick some dates! Also, times, if you want. |
| [Dropdown](/ui-components/dropdown) | Displays a menu to the user—such as a set of actions or functions—triggered by a button, with full keyboard navigation support. |
| [Heading](/ui-components/heading) | Clean and consistent headings and subheadings. |
| [Icon](/ui-components/icon) | You may use many icons from the streamline icon set. |
| [Input](/ui-components/input) | The classic form text input. |
| [Modal](/ui-components/modal) | Display content in a layer above the main page. Ideal for confirmations, alerts, and forms. |
| [Popover](/ui-components/popover) | Display rich content in a portal, triggered by a button. |
| [Radio](/ui-components/radio) | Radio buttons are used to select a single option from a list of options. |
| [Select](/ui-components/select) | Displays a list of options for the user to pick from—triggered by an input style button. |
| [Separator](/ui-components/separator) | Clean and consistent visual separators for content sections. |
| [Splitter](/ui-components/splitter) | Splitter is a component that allows you to split content into multiple, resizable panes. |
| [Switch](/ui-components/switch) | Toggle a setting on or off. Suitable for binary options like enabling or disabling features. |
| [Table](/ui-components/table) | A responsive table component for displaying structured data in rows and columns. |
| [Tabs](/ui-components/tabs) | Tabs are a way to organize content into different sections. |
| [Textarea](/ui-components/textarea) | Simple multi-line text input. |
| [Checkbox](/ui-components/checkbox) | Checkboxes are used to select multiple options from a list of options. |
| [Datepicker](/ui-components/datepicker) | Pick some dates! Also, times, if you want. |
| [Dropdown](/ui-components/dropdown) | Displays a menu to the user—such as a set of actions or functions—triggered by a button, with full keyboard navigation support. |
| [Heading](/ui-components/heading) | Clean and consistent headings and subheadings. |
| [Icon](/ui-components/icon) | You may use many icons from the streamline icon set. |
| [Input](/ui-components/input) | The classic form text input. |
| [Modal](/ui-components/modal) | Display content in a layer above the main page. Ideal for confirmations, alerts, and forms. |
| [Popover](/ui-components/popover) | Display rich content in a portal, triggered by a button. |
| [Radio](/ui-components/radio) | Radio buttons are used to select a single option from a list of options. |
| [Select](/ui-components/select) | Displays a list of options for the user to pick from—triggered by an input style button. |
| [Separator](/ui-components/separator) | Clean and consistent visual separators for content sections. |
| [Splitter](/ui-components/splitter) | Splitter is a component that allows you to split content into multiple, resizable panes. |
| [Stack](/ui-components/stack) | Stacks are a good way of adding a layer of UX to the Control Panel. Ideal for short forms or editing related content. |
| [Switch](/ui-components/switch) | Toggle a setting on or off. Suitable for binary options like enabling or disabling features. |
| [Table](/ui-components/table) | A responsive table component for displaying structured data in rows and columns. |
| [Tabs](/ui-components/tabs) | Tabs are a way to organize content into different sections. |
| [Textarea](/ui-components/textarea) | Simple multi-line text input. |
39 changes: 8 additions & 31 deletions content/collections/pages/modals.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,12 @@
title: Modals
id: 88bf3f66-4b80-42c9-8b65-bef712b8f413
---
## Modals

You can create modals using the `<modal>` component.

``` html
<modal
v-if="isOpen"
name="my-modal"
width="300px" height="300px"
@closed="isOpen = false"
>
<div slot-scope="{ close }">
Your modal's content.
<button @click="close">x</button>
</div>
</modal>
```

When a modal is rendered in the DOM, it will be automatically opened. So, to control whether or not it's open, you should add a `v-if` to it.

When closed, the modal will emit a `closed` event. You should use this event to change the 'open' condition back to `false`.

You should also add a button somewhere inside your modal to be able to close it. To close it, emit a `closed` event.
You can learn more about our `<Modal>` component on the [UI Component docs](https://ui.statamic.dev/?path=/docs/components-modal--docs).

## Confirmation Modals

There is a prebuilt modal component available to you if you don't need something completely custom.

Similar to the regular modal, you should use a `v-if` to make it appear.
There is a prebuilt modal component available to you if you don't need something completely custom. You should use `v-if` to make it appear.

``` html
<confirmation-modal
Expand Down Expand Up @@ -61,10 +38,10 @@ Similar to the regular modal, you should use a `v-if` to make it appear.

The default slot replaces the `bodyText` prop. Useful when you need something more complicated than a single paragraph.

``` html
<confirmation-modal ...>
<p>More complicated</p>
<p>stuff here.</p>
</confirmation-modal>
```
``` html
<confirmation-modal ...>
<p>More complicated</p>
<p>stuff here.</p>
</confirmation-modal>
```

67 changes: 0 additions & 67 deletions content/collections/pages/stacks.md
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion content/collections/pages/vue-2-to-3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -578,7 +578,7 @@ import { Input, Textarea, Combobox, Switch } from '@statamic/cms/ui'; // [tl! ++

## Modals and Stacks

Previously, you had to use `v-if` to control the "open state" of Modals and Stacks. You should now `v-model` the open state instead:
Previously, you had to use `v-if` to control the "open state" of Modals and Stacks. You should now use `v-model` to control the open state instead:

```vue
<!-- Using v-model -->
Expand Down
2 changes: 0 additions & 2 deletions content/trees/collections/pages.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,8 +341,6 @@ tree:
entry: 28068f9a-f269-4646-87e4-881e5477558d
-
entry: e2577828-504b-490b-a8b6-10991ae8a0b6
-
entry: c21a18cc-b9a9-4b1a-b1f7-97473f7d82f1
-
entry: 2d6381b8-dc0a-4a5d-b750-1a9dd7c0bb14
children:
Expand Down
3 changes: 0 additions & 3 deletions content/trees/navigation/extending_docs.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,6 @@ tree:
-
id: dbea0d9e-6a6a-42fd-83bf-d0d2eae539b6
entry: d84613d5-2b2b-465d-8f02-c71b6d2aadf1
-
id: 6a3e2a46-90fa-420b-b48b-79ba5ad0ac20
entry: c21a18cc-b9a9-4b1a-b1f7-97473f7d82f1
-
id: 912c7cdd-8c3f-4824-8af5-95ad81f45fb5
entry: b80820bb-c2e8-475f-98bd-8ea0ef9f5339
Expand Down
2 changes: 1 addition & 1 deletion routes/redirects.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
Route::permanentRedirect('extending/repositories', '/backend-apis/repositories');
Route::permanentRedirect('extending/search', '/frontend/search#digging-deeper');
Route::permanentRedirect('extending/slugs', '/vue-components/slugs');
Route::permanentRedirect('extending/stacks', '/vue-components/stacks');
Route::permanentRedirect('extending/stacks', 'https://ui.statamic.dev/?path=/docs/components-stack--docs');
Route::permanentRedirect('extending/tags', '/tags/building-a-tag');
Route::permanentRedirect('extending/testing-in-addons', '/addons/testing');
Route::permanentRedirect('extending/toast-notifications', '/control-panel/toast-notifications');
Expand Down