modal

package
v0.0.7 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jan 17, 2026 License: MIT Imports: 6 Imported by: 0

Documentation

Overview

Package modal provides modal dialog components with Alpine.js state management.

Modal is the foundation for overlay components including Dialog, AlertDialog, Drawer, and Sheet. It provides:

  • Backdrop with fade transition
  • Content with scale-in transition
  • Configurable sizes (sm, md, lg, xl, full)
  • Close on escape (configurable)
  • Close on outside click (configurable)
  • Optional close button
  • Focus trap using Alpine Focus plugin

Basic usage: 

modal.Modal(
    modal.ModalProps{
        Size: forgeui.SizeMD,
        CloseOnEscape: true,
        CloseOnOutsideClick: true,
    },
    button.Button(g.Text("Open Modal")),
    html.Div(
        modal.ModalHeader("Confirm Action", "Are you sure?"),
        html.P(g.Text("This action cannot be undone.")),
        modal.ModalFooter(
            button.Button(g.Text("Cancel")),
            button.Button(g.Text("Confirm")),
        ),
    ),
)

Index

Constants

This section is empty.

Variables

This section is empty.

Functions

func AlertDialog 

func AlertDialog(children ...g.Node) g.Node

AlertDialog creates an alert dialog for critical confirmations.

Unlike regular dialogs, alert dialogs:

  • Cannot be closed by clicking outside (by design)
  • Require explicit user action
  • Are typically used for destructive actions
  • Auto-focus on the primary action button

Example: 

alertDialog.AlertDialog(
    alertDialog.AlertDialogTrigger(
        button.Button(g.Text("Delete Account"), button.WithVariant("destructive")),
    ),
    alertDialog.AlertDialogContent(
        alertDialog.AlertDialogHeader(
            alertDialog.AlertDialogTitle("Are you absolutely sure?"),
            alertDialog.AlertDialogDescription("This action cannot be undone."),
        ),
        alertDialog.AlertDialogFooter(
            alertDialog.AlertDialogCancel(button.Button(g.Text("Cancel"))),
            alertDialog.AlertDialogAction(button.Button(g.Text("Delete"), button.WithVariant("destructive"))),
        ),
    ),
)

func AlertDialogAction 

func AlertDialogAction(child g.Node) g.Node

AlertDialogAction wraps a confirm/action button.

This should be the primary action button, often with a destructive variant. The button itself handles the actual action; this wrapper only provides the proper HTML structure.

func AlertDialogCancel 

func AlertDialogCancel(child g.Node) g.Node

AlertDialogCancel wraps a cancel button to close the alert dialog.

This is the safe action - typically an outline or ghost button.

func AlertDialogContent 

func AlertDialogContent(children ...g.Node) g.Node

AlertDialogContent creates the alert dialog content panel.

By design, alert dialogs: - Cannot close on outside click - Always show close button - Use medium size by default

func AlertDialogContentWithSize 

func AlertDialogContentWithSize(size forgeui.Size, children ...g.Node) g.Node

AlertDialogContentWithSize creates alert dialog content with custom size

func AlertDialogDescription 

func AlertDialogDescription(text string) g.Node

AlertDialogDescription creates the alert dialog description element.

func AlertDialogFooter 

func AlertDialogFooter(children ...g.Node) g.Node

AlertDialogFooter creates a footer section for action buttons.

Typically contains Cancel and Action buttons.

func AlertDialogHeader 

func AlertDialogHeader(children ...g.Node) g.Node

AlertDialogHeader creates a header section for the alert dialog.

func AlertDialogTitle 

func AlertDialogTitle(text string) g.Node

AlertDialogTitle creates the alert dialog title element.

func AlertDialogTrigger 

func AlertDialogTrigger(child g.Node) g.Node

AlertDialogTrigger wraps an element to trigger opening the alert dialog.

func Dialog 

func Dialog(children ...g.Node) g.Node

Dialog creates a dialog container with compound component API.

Dialog provides a more semantic API than the base Modal component, with separate components for trigger, content, header, footer, etc.

Example: 

dialog.Dialog(
    dialog.DialogTrigger(button.Button(g.Text("Edit Profile"))),
    dialog.DialogContent(
        dialog.DialogHeader(
            dialog.DialogTitle("Edit Profile"),
            dialog.DialogDescription("Make changes here."),
        ),
        html.Div(/* form fields */),
        dialog.DialogFooter(
            dialog.DialogClose(button.Button(g.Text("Cancel"))),
            button.Button(g.Text("Save")),
        ),
    ),
)

func DialogBody 

func DialogBody(children ...g.Node) g.Node

DialogBody creates the main content area of the dialog.

func DialogClose 

func DialogClose(child g.Node) g.Node

DialogClose wraps an element to close the dialog when clicked.

func DialogContent 

func DialogContent(children ...g.Node) g.Node

DialogContent creates the dialog content panel with backdrop.

Options can be passed to customize size and behavior: 

DialogContent(opts ...DialogOption)

func DialogContentWithOptions 

func DialogContentWithOptions(props DialogContentProps, children ...g.Node) g.Node

DialogContentWithOptions creates dialog content with custom props

func DialogDescription 

func DialogDescription(text string) g.Node

DialogDescription creates the dialog description element.

func DialogFooter 

func DialogFooter(children ...g.Node) g.Node

DialogFooter creates a footer section for action buttons.

func DialogFull 

func DialogFull(children ...g.Node) g.Node

func DialogHeader 

func DialogHeader(children ...g.Node) g.Node

DialogHeader creates a header section for the dialog.

func DialogLG 

func DialogLG(children ...g.Node) g.Node

func DialogSM 

func DialogSM(children ...g.Node) g.Node

DialogSM creates a small dialog for convenience.

func DialogTitle 

func DialogTitle(text string) g.Node

DialogTitle creates the dialog title element.

func DialogTrigger 

func DialogTrigger(child g.Node) g.Node

DialogTrigger wraps an element to trigger opening the dialog when clicked.

func DialogXL 

func DialogXL(children ...g.Node) g.Node

func Drawer 

func Drawer(props DrawerProps, trigger g.Node, content ...g.Node) g.Node

Drawer creates a drawer that slides in from a screen edge.

Drawers are panels that slide in from the edge of the screen, commonly used for navigation menus, filters, or forms.

Example: 

drawer.Drawer(
    drawer.DrawerProps{
        Side: forgeui.SideRight,
        Size: forgeui.SizeMD,
    },
    button.Button(g.Text("Open Drawer")),
    html.Div(
        drawer.DrawerHeader("Settings", "Configure your preferences"),
        html.Div(g.Text("Drawer content")),
    ),
)

func DrawerBody 

func DrawerBody(children ...g.Node) g.Node

DrawerBody creates the main content area of the drawer.

func DrawerClose 

func DrawerClose(child g.Node) g.Node

DrawerClose wraps an element to close the drawer when clicked.

func DrawerFooter 

func DrawerFooter(children ...g.Node) g.Node

DrawerFooter creates a footer section for action buttons.

func DrawerHeader 

func DrawerHeader(title, description string) g.Node

DrawerHeader creates a header section for the drawer. 

func Modal(props ModalProps, trigger g.Node, content ...g.Node) g.Node

Modal creates a modal dialog with Alpine.js state management.

The modal consists of three main parts:

  1. Trigger element - clicks to open the modal
  2. Backdrop - semi-transparent overlay
  3. Content - the actual modal panel

Example: 

modal.Modal(
    modal.ModalProps{Size: forgeui.SizeLG},
    button.Button(g.Text("Open")),
    html.Div(g.Text("Modal content")),
)

func ModalClose 

func ModalClose(child g.Node) g.Node

ModalClose wraps a child element to close the modal when clicked.

Example: 

modal.ModalClose(button.Button(g.Text("Close")))

func ModalFooter 

func ModalFooter(children ...g.Node) g.Node

ModalFooter creates a footer section for action buttons.

Example: 

modal.ModalFooter(
    button.Button(g.Text("Cancel")),
    button.Button(g.Text("Confirm")),
)

func ModalHeader 

func ModalHeader(title, description string) g.Node

ModalHeader creates a header section for the modal with title and optional description.

Example: 

modal.ModalHeader("Delete Account", "This action cannot be undone.")

func Sheet 

func Sheet(children ...g.Node) g.Node

Sheet creates a sheet container with compound component API.

Sheet provides a more semantic API than the base Drawer component, similar to how Dialog wraps Modal.

Example: 

sheet.Sheet(
    sheet.SheetTrigger(button.Button(g.Text("Open Settings"))),
    sheet.SheetContent(
        forgeui.SideRight,
        sheet.SheetHeader(
            sheet.SheetTitle("Settings"),
            sheet.SheetDescription("Configure your preferences"),
        ),
        html.Div(/* settings content */),
        sheet.SheetFooter(
            sheet.SheetClose(button.Button(g.Text("Close"))),
        ),
    ),
)

func SheetBody 

func SheetBody(children ...g.Node) g.Node

SheetBody creates the main content area of the sheet.

func SheetBottom 

func SheetBottom(children ...g.Node) g.Node

func SheetClose 

func SheetClose(child g.Node) g.Node

SheetClose wraps an element to close the sheet when clicked.

func SheetContent 

func SheetContent(side forgeui.Side, children ...g.Node) g.Node

SheetContent creates the sheet content panel with specified side.

func SheetContentWithOptions 

func SheetContentWithOptions(props SheetContentProps, children ...g.Node) g.Node

SheetContentWithOptions creates sheet content with custom props

func SheetDescription 

func SheetDescription(text string) g.Node

SheetDescription creates the sheet description element.

func SheetFooter 

func SheetFooter(children ...g.Node) g.Node

SheetFooter creates a footer section for action buttons.

func SheetHeader 

func SheetHeader(children ...g.Node) g.Node

SheetHeader creates a header section for the sheet.

func SheetLeft 

func SheetLeft(children ...g.Node) g.Node

SheetLeft creates a sheet that slides in from the left side.

func SheetRight 

func SheetRight(children ...g.Node) g.Node

func SheetTitle 

func SheetTitle(text string) g.Node

SheetTitle creates the sheet title element.

func SheetTop 

func SheetTop(children ...g.Node) g.Node

func SheetTrigger 

func SheetTrigger(child g.Node) g.Node

SheetTrigger wraps an element to trigger opening the sheet when clicked.

Types

type DialogContentProps 

type DialogContentProps struct {
	Size                forgeui.Size
	CloseOnOutsideClick bool
	ShowClose           bool
	Class               string
}

DialogContentProps defines configuration for dialog content

type DrawerProps 

type DrawerProps struct {
	// Side specifies which edge the drawer slides in from
	Side forgeui.Side

	// Size controls the width (for left/right) or height (for top/bottom)
	Size forgeui.Size

	// CloseOnEscape enables closing when Escape key is pressed
	CloseOnEscape bool

	// CloseOnOutsideClick enables closing when clicking the backdrop
	CloseOnOutsideClick bool

	// ShowClose displays a close button
	ShowClose bool

	// Class adds additional CSS classes
	Class string
}

DrawerProps defines configuration for a drawer component

type ModalProps 

type ModalProps struct {
	// Size controls the maximum width of the modal
	Size forgeui.Size

	// CloseOnEscape enables closing the modal when Escape key is pressed
	CloseOnEscape bool

	// CloseOnOutsideClick enables closing when clicking the backdrop
	CloseOnOutsideClick bool

	// ShowClose displays a close button in the top-right corner
	ShowClose bool

	// Class adds additional CSS classes to the modal content
	Class string
}

ModalProps defines configuration for a modal dialog

type SheetContentProps 

type SheetContentProps struct {
	Side                forgeui.Side
	Size                forgeui.Size
	CloseOnOutsideClick bool
	ShowClose           bool
	Class               string
}

SheetContentProps defines configuration for sheet content

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.