Modal

Dialog overlay that requires user attention or interaction.

TailwindCSS

Vanilla JS

package showcase

import (
	"github.com/axzilla/templui/internal/components/button"
	"github.com/axzilla/templui/internal/components/modal"
)

templ ModalDefault() {
	@modal.Trigger(modal.TriggerProps{
		For: "default-modal",
	}) {
		@button.Button() {
			Open Modal
		}
	}
	@modal.Modal(modal.Props{
		ID:    "default-modal",
		Class: "max-w-md",
	}) {
		@modal.Header() {
			Are you absolutely sure?
		}
		@modal.Body() {
			This action cannot be undone. This will permanently delete your account and remove your data from our servers.				
		}
		@modal.Footer() {
			<div class="flex gap-2">
				@modal.Close(modal.CloseProps{
					For: "default-modal",
				}) {
					@button.Button() {
						Cancel
					}
				}
				@modal.Close(modal.CloseProps{
					For: "default-modal",
				}) {
					@button.Button(button.Props{
						Variant: button.VariantSecondary,
					}) {
						Continue
					}
				}
			</div>
		}
	}
}

Installation

Install the component
```
templui add modal
```
Add the JavaScript to your layout
```
@modal.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

API Reference

Required parameter

Hover for description

Modal

Main modal container component.

Name	Type	Default
`ID` Unique identifier for the modal	`string`	`modal-{randomID}`
`Class` Additional CSS classes to apply to the modal content	`string`	`""`
`Attributes` Additional HTML attributes to apply to the modal container	`templ.Attributes`	`nil`
`DisableClickAway` Whether to disable closing the modal by clicking outside	`bool`	`false`
`DisableESC` Whether to disable closing the modal with the ESC key	`bool`	`false`
`InitialOpen` Whether the modal should be open initially	`bool`	`false`

Trigger

Element that triggers the modal to open.

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`
`Disabled` Whether the trigger is disabled	`bool`	`false`
`For` ID of the modal to trigger when clicked	`string`	`""`

Close

Element that closes the modal.

Name	Type	Default
`ID` Unique identifier for the close element	`string`	`""`
`Class` Additional CSS classes to apply to the close element	`string`	`""`
`Attributes` Additional HTML attributes to apply to the close element	`templ.Attributes`	`nil`
`For` ID of the modal to close (defaults to closest modal if empty)	`string`	`""`

Header

Header section of the modal.

Name	Type	Default
`ID` Unique identifier for the header element	`string`	`""`
`Class` Additional CSS classes to apply to the header	`string`	`""`
`Attributes` Additional HTML attributes to apply to the header	`templ.Attributes`	`nil`

Body

Body/content section of the modal.

Name	Type	Default
`ID` Unique identifier for the body element	`string`	`""`
`Class` Additional CSS classes to apply to the body	`string`	`""`
`Attributes` Additional HTML attributes to apply to the body	`templ.Attributes`	`nil`

Footer

Footer section of the modal.

Name	Type	Default
`ID` Unique identifier for the footer element	`string`	`""`
`Class` Additional CSS classes to apply to the footer	`string`	`""`
`Attributes` Additional HTML attributes to apply to the footer	`templ.Attributes`	`nil`

Getting Started

Components

Modal

Installation

API Reference

Trigger

Close

Header

Body

Footer