tuix-modal

The modal covers the viewport and centres a tuix-paper card. It is hidden until visible is set.

Delete this template?

The template and its renders will be removed. This cannot be undone.

Loading the components…

Close it with the icon in the header, or with either action button. Those two are wired up in the demo, because the modal only closes itself from its own icon.

<tuix-modal visible>
    <tuix-text slot="title" size="xs">Delete this template?</tuix-text>
    <tuix-text slot="body">The template and its renders will be removed. This cannot be undone.</tuix-text>
    <div slot="actions" style="display: flex; gap: 8px">
        <tuix-button variant="secondary">Cancel</tuix-button>
        <tuix-button variant="primary">Delete</tuix-button>
    </div>
</tuix-modal>

modal.addEventListener('on-close', () => setOpen(false))

Scrollable body

With scrollable, a long body scrolls inside the card instead of growing it past the viewport.

<tuix-modal visible scrollable>
    <tuix-text slot="title" size="xs">Terms</tuix-text>
    <div slot="body">…a very long text…</div>
</tuix-modal>

API

Properties

Property	Attribute	Type	Default	Description
`visible`	`visible`	`boolean`	`false`	Shows the modal. Reflected, so CSS can target `[visible]`
`scrollable`	`scrollable`	`boolean`	`false`	Let the body scroll instead of growing the card
`dark`	`dark`	`boolean`	`false`	Dark palette

Events

Event	Detail	When
`on-close`	None	The close icon is clicked

The component sets visible = false itself before firing, so a controlled parent must mirror that in its own state or the next open will be a no-op.

Slots

Slot	Content
`title`	The header, next to the close icon
`body`	The content
`actions`	The footer. Only padded: it does not arrange what it gets

Notes

The host is position: fixed but sets no z-index, so it stacks by document order: a positioned element further down the page can paint over it. The application has to give it one; the demo above uses z-index: 40 for exactly that reason, and tuix-toast ships with 99.
dark reaches the card and the close icon, which the modal renders itself, but not the title, body and actions slotted into it: those carry their own dark.
The actions slot adds padding and nothing else, so two buttons slotted straight into it stack the way the page's own flow puts them. Wrap them in a div of your own and give that the row layout, as the example above does.
The backdrop is part of the host and does not close the modal; the application adds that if the design calls for it.
Nothing traps focus or blocks page scrolling; when either matters, handle it in the application while the modal is open.
The card is capped at 96% of the viewport, and goes full width below 640px.