display

package
v0.10.0 Latest Latest
Warning

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

 Go to latest Published: Jul 8, 2026 License: MIT Imports: 13 Imported by: 4

Documentation

Overview

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Button component: variant/size enums, default props, and class lookups.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Package display provides UI components for data visualization and interactive elements including cards, tables, tabs, dropdowns, modals, tooltips, avatars, badges, and more.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Modal component: size enum, default props, and class lookup.

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

templ: version: v0.3.1020

Index

Examples

Constants

View Source 
const CountBadgeDefaultMax = 99

CountBadgeDefaultMax is the standard overflow threshold (99).

Variables

This section is empty.

Functions

func Accordion 

func Accordion(props AccordionProps) templ.Component

Accordion renders a collapsible accordion with accessible markup 

@display.Accordion(display.AccordionProps{
   Items: []display.AccordionItem{
     {ID: "faq1", Title: "What is this?", Open: true},
     {ID: "faq2", Title: "How does it work?"},
   },
})

func Avatar 

func Avatar(props AvatarProps) templ.Component

Avatar renders a user avatar with image, initials, or fallback 

@display.Avatar(display.AvatarProps{Src: "/avatar.jpg", Alt: "Alice"})

func AvatarShapeIsValid added in v0.7.0 

func AvatarShapeIsValid(v AvatarShape) bool

AvatarShapeIsValid reports whether v is one of the defined AvatarShape constants.

func AvatarSizeIsValid added in v0.7.0 

func AvatarSizeIsValid(v AvatarSize) bool

AvatarSizeIsValid reports whether v is one of the defined AvatarSize constants.

func AvatarStatusIsValid added in v0.8.0 

func AvatarStatusIsValid(v AvatarStatus) bool

AvatarStatusIsValid reports whether v is one of the defined AvatarStatus constants.

func Badge 

func Badge(props BadgeProps) templ.Component

Badge renders a compact status label 

@display.Badge(display.BadgeProps{Text: "Active", Type: display.BadgeSuccess, Dot: true})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.DefaultBadgeProps()
	props.Text = "Beta"
	props.Type = display.BadgeInfo

	var buf bytes.Buffer
	_ = display.Badge(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain the badge text and Tailwind classes
}

func BadgeSizeIsValid added in v0.7.0 

func BadgeSizeIsValid(v BadgeSize) bool

BadgeSizeIsValid reports whether v is one of the defined BadgeSize constants.

func BadgeTypeIsValid added in v0.7.0 

func BadgeTypeIsValid(v BadgeType) bool

BadgeTypeIsValid reports whether v is one of the defined BadgeType constants.

func Button 

func Button(props ButtonProps) templ.Component

Button renders a button or link styled as a button. When Href is set, renders as an anchor tag; otherwise renders as a button element. 

@display.Button(display.DefaultButtonProps())
@display.Button(display.ButtonProps{Text: "Save", Type: display.ButtonHTMLSubmit})
@display.Button(display.ButtonProps{Text: "Docs", Href: "/docs", Variant: display.ButtonSecondary})

func ButtonHTMLTypeIsValid added in v0.8.0 

func ButtonHTMLTypeIsValid(v ButtonHTMLType) bool

ButtonHTMLTypeIsValid reports whether v is one of the defined ButtonHTMLType constants.

func ButtonSizeIsValid added in v0.8.0 

func ButtonSizeIsValid(v ButtonSize) bool

ButtonSizeIsValid reports whether v is one of the defined ButtonSize constants.

func ButtonTypeIsValid added in v0.7.0 

func ButtonTypeIsValid(v ButtonType) bool

ButtonTypeIsValid reports whether v is one of the defined ButtonType constants.

func Card 

func Card(props CardProps) templ.Component

Card renders a bordered card with optional header and footer 

@display.Card(display.CardProps{Title: "Users", Subtitle: "Manage your users"}) {
   <p>Card content goes here</p>
 }
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.DefaultCardProps()
	props.Title = "Hello World"

	var buf bytes.Buffer
	_ = display.Card(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func CardPaddingIsValid added in v0.7.0 

func CardPaddingIsValid(v CardPadding) bool

CardPaddingIsValid reports whether v is one of the defined CardPadding constants.

func CopyButton added in v0.7.0 

func CopyButton(props CopyButtonProps) templ.Component
Example 
package main

import (
	"bytes"
	"context"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.DefaultCopyButtonProps()
	props.Text = "npm install my-package"
	props.Label = "Copy command"

	var buf bytes.Buffer
	_ = display.CopyButton(props).Render(context.Background(), &buf)
}

func CountBadge added in v0.7.0 

func CountBadge(props CountBadgeProps) templ.Component

CountBadge renders its children with a count notification badge overlaid in the top-right corner. When Count is 0 the badge is hidden (no element). When Count exceeds Max, the badge displays "Max+" to prevent layout overflow. 

@display.CountBadge(display.CountBadgeProps{Count: 5}) {
   @icons.Icon(icons.Bell, "h-6 w-6")
}
Example 
package main

import (
	"bytes"
	"context"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.CountBadgeProps{Count: 12, Max: 99}

	var buf bytes.Buffer
	_ = display.CountBadge(props).Render(context.Background(), &buf)
}

func DefinitionGrid added in v0.7.0 

func DefinitionGrid(props DefinitionGridProps) templ.Component

DefinitionGrid renders term-detail pairs in a responsive grid. Each pair is wrapped in a SimpleCard so the grid shows a clean dashboard of key-value tiles. Composes through Grid internally for consistent responsive behavior. 

@display.DefinitionGrid(display.DefinitionGridProps{
   Cols: display.GridCols2,
   Items: []display.DefinitionItem{
     {Term: "CPU", Detail: "42%"},
     {Term: "Memory", Detail: "8.2 GB"},
   },
})
Example 
package main

import (
	"bytes"
	"context"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.DefinitionGridProps{
		Cols: display.GridCols2,
		Items: []display.DefinitionItem{
			{Term: "CPU", Detail: "42%"},
			{Term: "Memory", Detail: "8.2 GB"},
		},
	}

	var buf bytes.Buffer
	_ = display.DefinitionGrid(props).Render(context.Background(), &buf)
}

func DefinitionList added in v0.6.0 

func DefinitionList(props DefinitionListProps) templ.Component

DefinitionList renders a two-column <dl> with term labels on the left and detail values on the right. Ideal for metadata tables, settings summaries, and key-value display. 

@display.DefinitionList(display.DefinitionListProps{
   Items: []display.DefinitionItem{
     {Term: "Email", Detail: "alice@example.com"},
     {Term: "Status", DetailComponent: display.Badge(display.BadgeProps{Text: "Active", Type: display.BadgeSuccess})},
   },
})

func Drawer added in v0.3.0 

func Drawer(props DrawerProps) templ.Component

Drawer renders an accessible side panel that slides in from the left or right 

@display.Drawer(display.DrawerProps{Title: "Settings", ID: "settings-drawer", Side: display.DrawerRight, Open: true, Nonce: nonce}) {
   <p>Drawer content</p>
}

overlayShell owns the shared a11y shell + JS + panel body. Drawer only supplies the panel classes (translate-x transitions, size, side) and the overlay-shell config (side-aware close animation).

func DrawerSideIsValid added in v0.7.0 

func DrawerSideIsValid(s DrawerSide) bool

DrawerSideIsValid reports whether s is DrawerLeft or DrawerRight.

func DrawerSizeIsValid added in v0.7.0 

func DrawerSizeIsValid(s DrawerSize) bool

DrawerSizeIsValid reports whether s is one of the defined DrawerSize constants. 

func Dropdown(props DropdownProps) templ.Component

Dropdown renders a button-triggered action menu 

@display.Dropdown(display.DropdownProps{
   Label: "Actions",
   Items: []display.DropdownItem{
     {Text: "Edit", Href: "/edit"},
     {Text: "Delete", Href: "/delete"},
   },
})

func DropdownItemKindIsValid(v DropdownItemKind) bool

DropdownItemKindIsValid reports whether v is one of the defined DropdownItemKind constants. 

func DropdownPositionIsValid(v DropdownPosition) bool

DropdownPositionIsValid reports whether v is one of the defined DropdownPosition constants.

func EmptyState 

func EmptyState(props EmptyStateProps) templ.Component

EmptyState renders a centered empty state with icon, title, description, and optional action 

@display.EmptyState(display.EmptyStateProps{
   Title: "No repositories",
   Description: "Connect your first repository to get started.",
   Icon: "folder",
   ActionText: "Connect Repository",
   ActionHref: "/repos/connect",
})

func Grid added in v0.7.0 

func Grid(props GridProps) templ.Component

Grid renders a responsive grid container that stacks on mobile and expands at sm/lg breakpoints. Pass grid items as children. 

@display.Grid(display.GridProps{Cols: display.GridCols3}) {
   for _, u := range users {
     @display.Card(display.CardProps{Title: u.Name}) { <p>{ u.Email }</p> }
   }
}

For container-query-based responsiveness (grid adapts to its parent container, not the viewport): 

@display.Grid(display.GridProps{Cols: display.GridCols3, ContainerResponsive: true}) {
   // items
}
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.DefaultGridProps()

	var buf bytes.Buffer
	_ = display.Grid(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
	// Output will contain responsive grid classes
}

func GridColsIsValid added in v0.7.0 

func GridColsIsValid(v GridCols) bool

GridColsIsValid reports whether v is one of the defined GridCols constants.

func GridGapIsValid added in v0.9.0 

func GridGapIsValid(v GridGap) bool

GridGapIsValid reports whether v is one of the defined GridGap constants.

func Image added in v0.7.0 

func Image(props ImageProps) templ.Component

Image renders an <img> with lazy loading, optional dimensions, and optional fallback source. The fallback swap is CSP-safe: a data-tc-img-fallback attribute on the img tag is consumed by a singleton error-capture listener.

For responsive images with multiple resolutions, this component does not expose a dedicated srcset field — use Attrs to add srcset/sizes manually: 

@display.Image(display.ImageProps{
    Src:    "/photo.jpg",
    Alt:    "Profile photo",
    Attrs:  templ.Attributes{"srcset": "/photo-2x.jpg 2x", "sizes": "50vw"},
})

@display.Image(display.ImageProps{Src: "/photo.jpg", Alt: "Profile photo", Width: 128, Height: 128, FallbackSrc: "/placeholder.jpg"})
Example 
package main

import (
	"bytes"
	"context"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.ImageProps{
		Src:    "/profile.jpg",
		Alt:    "Profile photo",
		Width:  128,
		Height: 128,
		Lazy:   true,
	}

	var buf bytes.Buffer
	_ = display.Image(props).Render(context.Background(), &buf)
}

func ListNote added in v0.6.0 

func ListNote(props ListNoteProps) templ.Component

ListNote renders a "Showing N of M" hint when a list is truncated (Total > Shown). Renders nothing when all rows fit. 

@display.ListNote(display.ListNoteProps{Shown: 50, Total: 127})

func Modal(props ModalProps) templ.Component

Modal renders an accessible modal dialog with backdrop 

@display.Modal(display.ModalProps{Title: "Confirm", ID: "confirm-modal", Nonce: nonce}) {
   <p>Are you sure?</p>
}

overlayShell owns the shared a11y shell + JS + panel body. Modal only supplies the panel classes (scale/opacity transitions, size) and the overlay-shell config (centered outerClass, scale close animation).

func ModalSizeIsValid added in v0.7.0 

func ModalSizeIsValid(s ModalSize) bool

ModalSizeIsValid reports whether s is one of the defined ModalSize constants.

func OverlayKindIsValid added in v0.8.0 

func OverlayKindIsValid(v OverlayKind) bool

OverlayKindIsValid reports whether v is one of the defined OverlayKind constants. 

func PageHeader(props PageHeaderProps) templ.Component

PageHeader renders a page-level header with title, optional subtitle, optional breadcrumb above, and an optional action slot on the right. 

@display.PageHeader(display.PageHeaderProps{
   Title: "Users",
   Subtitle: "Manage user accounts",
   Action: display.Button(display.ButtonProps{Text: "New user", Href: "/users/new"}),
})

func RelativeTime added in v0.7.0 

func RelativeTime(props RelativeTimeProps) templ.Component

RelativeTime renders a <time> element with a human-readable relative timestamp (e.g. "2 hours ago", "just now", "3 days ago"). The datetime attribute carries the RFC 3339 timestamp for accessibility and SEO. 

@display.RelativeTime(display.RelativeTimeProps{Time: createdAt})
@display.RelativeTime(display.RelativeTimeProps{Time: createdAt, AutoRefresh: false}) // static
Example 
package main

import (
	"bytes"
	"context"
	"time"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.RelativeTimeProps{
		Time: time.Date(2025, 1, 15, 10, 30, 0, 0, time.UTC),
	}

	var buf bytes.Buffer
	_ = display.RelativeTime(props).Render(context.Background(), &buf)
}

func SimpleCard 

func SimpleCard(props SimpleCardProps) templ.Component

SimpleCard renders a card without header/footer for quick use. Internally composes through Card for consistent shell styling. 

@display.SimpleCard(display.SimpleCardProps{}) {
   <p>Content</p>
 }

func SimpleEmptyState 

func SimpleEmptyState(message string) templ.Component

SimpleEmptyState is a minimal empty state for inline use 

@display.SimpleEmptyState("No items found")

func SortDirectionIsValid added in v0.8.0 

func SortDirectionIsValid(v SortDirection) bool

SortDirectionIsValid reports whether v is one of the defined SortDirection constants.

func StatCard 

func StatCard(props StatCardProps) templ.Component

StatCard renders a dashboard stat card with value, label, optional change indicator, and an optional leading icon tile. When Href is set, the whole card is wrapped in an <a> so it acts as a clickable navigation link. 

@display.StatCard(display.StatCardProps{Label: "Users", Value: "1,204", Icon: icons.Users})
@display.StatCard(display.StatCardProps{Label: "Active", Value: "42", Href: "/?activity=active"})
Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.DefaultStatCardProps()
	props.Value = "$12,345"
	props.Label = "Total Revenue"
	props.Trend = display.TrendUp
	props.Change = "+12.5%"

	var buf bytes.Buffer
	_ = display.StatCard(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func StatusBadge 

func StatusBadge(status string) templ.Component

StatusBadge is a convenience wrapper for common status values Maps status strings to badge types automatically 

@display.StatusBadge("active")

func Table 

func Table(props TableProps) templ.Component

Table renders a responsive data table 

@display.Table(display.TableProps{
   Headers: []string{"Name", "Email", "Role"},
   Rows: []display.TableRow{
     display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
     display.SimpleTableRow("Bob", "bob@example.com", "User"),
   },
})

For custom cell rendering, set Body to a component that renders <tr> elements directly — see the Body field on TableProps.

Example 
package main

import (
	"bytes"
	"context"
	"fmt"

	"github.com/larsartmann/templ-components/display"
)

func main() {
	props := display.TableProps{
		Headers: []string{"Name", "Email", "Role"},
		Rows: []display.TableRow{
			display.SimpleTableRow("Alice", "alice@example.com", "Admin"),
			display.SimpleTableRow("Bob", "bob@example.com", "User"),
		},
	}
	var buf bytes.Buffer
	_ = display.Table(props).Render(context.Background(), &buf)
	fmt.Println(buf.String())
}

func Tabs 

func Tabs(props TabsProps) templ.Component

Tabs renders a tabbed interface with accessible markup 

@display.Tabs(display.TabsProps{
   ActiveTabID: "users",
   Tabs: []display.Tab{
     {ID: "users", Label: "Users"},
     {ID: "settings", Label: "Settings"},
   },
})

func TabsVariantIsValid added in v0.8.0 

func TabsVariantIsValid(v TabsVariant) bool

TabsVariantIsValid reports whether v is one of the defined TabsVariant constants.

func Tooltip 

func Tooltip(props TooltipProps) templ.Component

Tooltip wraps content in a hover-activated tooltip 

@display.Tooltip(display.TooltipProps{Text: "More info"}) {
   <button>Hover me</button>
 }

func TooltipPositionIsValid added in v0.7.0 

func TooltipPositionIsValid(v TooltipPosition) bool

TooltipPositionIsValid reports whether v is one of the defined TooltipPosition constants.

func TrendDirectionIsValid added in v0.7.0 

func TrendDirectionIsValid(v TrendDirection) bool

TrendDirectionIsValid reports whether v is one of the defined TrendDirection constants.

Types

type AccordionItem 

type AccordionItem struct {
	ID      string
	Title   string
	Content templ.Component
	Open    bool
}

AccordionItem represents a single collapsible panel

type AccordionProps 

type AccordionProps struct {
	utils.BaseProps
	Items []AccordionItem
}

AccordionProps configures an accordion component

func DefaultAccordionProps 

func DefaultAccordionProps() AccordionProps

DefaultAccordionProps returns sensible defaults

type AvatarProps 

type AvatarProps struct {
	utils.BaseProps
	Src      string
	Alt      string
	Initials string
	Size     AvatarSize
	Shape    AvatarShape
	Status   AvatarStatus
}

AvatarProps configures an avatar component

func DefaultAvatarProps 

func DefaultAvatarProps() AvatarProps

DefaultAvatarProps returns sensible defaults

type AvatarShape 

type AvatarShape string

AvatarShape defines the shape of an avatar 

const (
	AvatarShapeCircle AvatarShape = "circle"
	AvatarShapeSquare AvatarShape = "square"
)

type AvatarSize 

type AvatarSize string

AvatarSize defines the size of an avatar 

const (
	AvatarSizeXS AvatarSize = "xs"
	AvatarSizeSM AvatarSize = "sm"
	AvatarSizeMD AvatarSize = "md"
	AvatarSizeLG AvatarSize = "lg"
	AvatarSizeXL AvatarSize = "xl"
)

type AvatarStatus 

type AvatarStatus string

AvatarStatus represents the online status indicator for an avatar 

const (
	AvatarStatusNone    AvatarStatus = ""
	AvatarStatusOnline  AvatarStatus = "online"
	AvatarStatusOffline AvatarStatus = "offline"
)

type BadgeProps 

type BadgeProps struct {
	utils.BaseProps
	Text string
	Type BadgeType
	Size BadgeSize
	Pill bool
	Dot  bool
	Href string
}

BadgeProps configures a status badge

func DefaultBadgeProps 

func DefaultBadgeProps() BadgeProps

DefaultBadgeProps returns sensible defaults

type BadgeSize 

type BadgeSize string

BadgeSize defines the size of a badge 

const (
	BadgeSizeSM BadgeSize = "sm"
	BadgeSizeMD BadgeSize = "md"
	BadgeSizeLG BadgeSize = "lg"
)

type BadgeType 

type BadgeType string

BadgeType defines the visual style of a badge 

const (
	BadgePrimary BadgeType = "primary"
	BadgeSuccess BadgeType = "success"
	BadgeWarning BadgeType = "warning"
	BadgeError   BadgeType = "error"
	BadgeInfo    BadgeType = "info"
	BadgeNeutral BadgeType = "neutral"
)

type ButtonHTMLType added in v0.5.0 

type ButtonHTMLType string

ButtonHTMLType is the HTML type attribute for a <button> element. 

const (
	ButtonHTMLButton ButtonHTMLType = "button"
	ButtonHTMLSubmit ButtonHTMLType = "submit"
	ButtonHTMLReset  ButtonHTMLType = "reset"
)

Button HTML type constants

type ButtonProps 

type ButtonProps struct {
	utils.BaseProps
	Text     string
	Type     ButtonHTMLType // button, submit, reset (default: button; ignored when Href is set)
	Href     string         // if set, renders as <a> instead of <button>
	Variant  ButtonType     // default: Primary
	Size     ButtonSize     // default: MD
	Disabled bool
	Icon     templ.Component
	External bool // adds target="_blank" and rel="noopener noreferrer" for links
}

ButtonProps configures a button or link styled as a button

func DefaultButtonProps 

func DefaultButtonProps() ButtonProps

DefaultButtonProps returns sensible defaults

type ButtonSize 

type ButtonSize string

ButtonSize defines the size of a button 

const (
	ButtonSizeSM ButtonSize = "sm"
	ButtonSizeMD ButtonSize = "md"
	ButtonSizeLG ButtonSize = "lg"
)

Button size constants

type ButtonType 

type ButtonType string

ButtonType defines the visual style of a button 

const (
	ButtonPrimary   ButtonType = "primary"
	ButtonSecondary ButtonType = "secondary"
	ButtonDanger    ButtonType = "danger"
	ButtonGhost     ButtonType = "ghost"
	ButtonLink      ButtonType = "link"
)

Button variant constants

type CardPadding 

type CardPadding string

CardPadding defines the internal padding of a card 

const (
	CardPaddingNone CardPadding = "none"
	CardPaddingSM   CardPadding = "sm"
	CardPaddingMD   CardPadding = "md"
	CardPaddingLG   CardPadding = "lg"
)

type CardProps 

type CardProps struct {
	utils.BaseProps
	Title        string
	Subtitle     string
	Footer       templ.Component
	HeaderAction templ.Component
	// Body, when set, overrides children for the card's main content area.
	// Use this for struct-based composition; pass children for templ-block
	// composition. If both are set, Body takes precedence.
	Body    templ.Component
	Padding CardPadding
}

CardProps configures a card container

func DefaultCardProps 

func DefaultCardProps() CardProps

DefaultCardProps returns sensible defaults

type CopyButtonProps added in v0.7.0 

type CopyButtonProps struct {
	utils.BaseProps
	// Text is the string to copy to the clipboard.
	Text string
	// Label is the button text in the idle state. Defaults to "Copy".
	Label string
	// CopiedLabel is the button text shown briefly after a successful copy.
	// Defaults to "Copied!".
	CopiedLabel string
	// Icon optionally renders a leading clipboard icon.
	Icon bool
	// Href, when set, renders an <a> instead of a <button>. The link still
	// copies text to the clipboard on click. Use for copy-as-link patterns.
	Href string
}

CopyButtonProps configures a button that copies text to the clipboard. When the user clicks the button, the text is copied via the Clipboard API, and the button label temporarily changes to CopiedLabel before reverting.

func DefaultCopyButtonProps added in v0.7.0 

func DefaultCopyButtonProps() CopyButtonProps

DefaultCopyButtonProps returns sensible defaults.

type CountBadgeProps added in v0.7.0 

type CountBadgeProps struct {
	utils.BaseProps
	// Count is the number to display in the badge.
	Count int
	// Max is the overflow threshold. When Count > Max, the badge shows
	// "Max+" instead of the raw number (e.g. Max=99, Count=150 → "99+").
	// Defaults to 99. Set to 0 to disable overflow.
	Max int
}

CountBadgeProps configures an icon or element with a notification count badge overlaid in the top-right corner. Use it to show unread counts, pending items, or any numeric indicator on top of a bell icon, avatar, etc.

func DefaultCountBadgeProps added in v0.7.0 

func DefaultCountBadgeProps() CountBadgeProps

DefaultCountBadgeProps returns sensible defaults.

type DefinitionGridProps added in v0.7.0 

type DefinitionGridProps struct {
	utils.BaseProps
	// Items are the term-detail pairs to render.
	Items []DefinitionItem
	// Cols controls the responsive column count. Defaults to GridCols3 when
	// empty or unknown.
	Cols GridCols
}

DefinitionGridProps configures a responsive grid of definition items. Unlike DefinitionList (which renders a single two-column table), DefinitionGrid lays out each term-detail pair as a card in a responsive grid — ideal for dashboards and settings pages where many key-value pairs need to be scanned side by side.

func DefaultDefinitionGridProps added in v0.7.0 

func DefaultDefinitionGridProps() DefinitionGridProps

DefaultDefinitionGridProps returns sensible defaults.

type DefinitionItem added in v0.6.0 

type DefinitionItem struct {
	Term   string
	Detail string
	// DetailComponent overrides Detail when set — use for badges, links, or
	// any rich content instead of plain text.
	DetailComponent templ.Component
}

DefinitionItem is one term-detail pair in a DefinitionList.

type DefinitionListProps added in v0.6.0 

type DefinitionListProps struct {
	utils.BaseProps
	Items []DefinitionItem
}

DefinitionListProps configures a two-column term/detail list.

func DefaultDefinitionListProps added in v0.6.0 

func DefaultDefinitionListProps() DefinitionListProps

DefaultDefinitionListProps returns sensible defaults

type DrawerProps added in v0.3.0 

type DrawerProps struct {
	utils.BaseProps
	Title string
	Open  bool
	Side  DrawerSide
	Size  DrawerSize
}

DrawerProps configures a drawer (side panel) component

func DefaultDrawerProps added in v0.3.0 

func DefaultDrawerProps() DrawerProps

DefaultDrawerProps returns sensible defaults

type DrawerSide added in v0.3.0 

type DrawerSide string

DrawerSide defines which side the drawer slides in from 

const (
	DrawerLeft  DrawerSide = "left"
	DrawerRight DrawerSide = "right"
)

type DrawerSize added in v0.3.0 

type DrawerSize string

DrawerSize defines the width of the drawer panel 

const (
	DrawerSizeSM  DrawerSize = "sm"
	DrawerSizeMD  DrawerSize = "md"
	DrawerSizeLG  DrawerSize = "lg"
	DrawerSizeXL  DrawerSize = "xl"
	DrawerSize2XL DrawerSize = "2xl"  // largest available width (max-w-2xl)
	DrawerFull    DrawerSize = "full" // Deprecated: use DrawerSize2XL
)

Drawer size constants. DrawerSize2XL is the largest size (max-w-2xl); DrawerFull is a deprecated alias kept for backward compatibility. 

type DropdownItem struct {
	Text     string
	Href     string
	Icon     icons.Name
	Kind     DropdownItemKind
	External bool
	Disabled bool
	Attrs    templ.Attributes
}

DropdownItem represents a single action in a dropdown menu 

func (item DropdownItem) IsLink() bool

IsLink returns true if the item should render as a link. When Kind is unset, falls back to Href-based discrimination for backward compat. 

type DropdownItemKind string

DropdownItemKind determines how a dropdown item is rendered 

const (
	// DropdownItemLink renders the item as an anchor (<a>) element
	DropdownItemLink DropdownItemKind = "link"
	// DropdownItemButton renders the item as a <button> element
	DropdownItemButton DropdownItemKind = "button"
)
type DropdownPosition string

DropdownPosition defines where the dropdown menu appears 

const (
	DropdownPositionLeft  DropdownPosition = "left"
	DropdownPositionRight DropdownPosition = "right"
)
type DropdownProps struct {
	utils.BaseProps
	Label    string
	Items    []DropdownItem
	Position DropdownPosition
}

DropdownProps configures a dropdown action menu

func DefaultDropdownProps 

func DefaultDropdownProps() DropdownProps

DefaultDropdownProps returns sensible defaults

type EmptyStateProps 

type EmptyStateProps struct {
	utils.BaseProps
	Title       string
	Description string
	Icon        icons.Name
	ActionText  string
	ActionHref  string
	ActionAttrs templ.Attributes
}

EmptyStateProps configures an empty state illustration

func DefaultEmptyStateProps 

func DefaultEmptyStateProps() EmptyStateProps

DefaultEmptyStateProps returns sensible defaults

type GridCols added in v0.7.0 

type GridCols string

GridCols is a typed enum for the responsive column count of a Grid. Unknown values fall back to GridCols3 (graceful degradation — never panic). 

const (
	GridCols1 GridCols = "1"
	GridCols2 GridCols = "2"
	GridCols3 GridCols = "3"
	GridCols4 GridCols = "4"
	GridCols5 GridCols = "5"
	GridCols6 GridCols = "6"
	// GridColsDefault is the canonical default (3 columns at the lg breakpoint).
	GridColsDefault GridCols = GridCols3
)

type GridGap added in v0.9.0 

type GridGap string

GridGap is a typed enum for the gap spacing between grid items. Unknown values fall back to GridGapMD (graceful degradation — never panic). 

const (
	GridGapSM GridGap = "sm" // gap-2 (0.5rem)
	GridGapMD GridGap = "md" // gap-4 (1rem) — default
	GridGapLG GridGap = "lg" // gap-6 (1.5rem)
	GridGapXL GridGap = "xl" // gap-8 (2rem)
	// GridGapDefault is the canonical default.
	GridGapDefault GridGap = GridGapMD
)

type GridProps added in v0.7.0 

type GridProps struct {
	utils.BaseProps
	// Cols controls the responsive column count. Defaults to GridCols3 when
	// empty or unknown.
	Cols GridCols
	// Gap controls the spacing between grid items. Defaults to GridGapMD (gap-4).
	Gap GridGap
	// ContainerResponsive, when true, renders the grid inside an @container
	// wrapper so column counts respond to the container's width instead of
	// the browser viewport. Useful for grids placed in sidebars, cards, or
	// other constrained layouts. Defaults to false (viewport breakpoints).
	ContainerResponsive bool
}

GridProps configures a responsive grid layout. Use Grid to lay out cards, stat cards, or any repeating content with consistent responsive breakpoints without repeating the long `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` utility string on every page.

func DefaultGridProps added in v0.7.0 

func DefaultGridProps() GridProps

DefaultGridProps returns sensible defaults (GridCols3).

type ImageProps added in v0.7.0 

type ImageProps struct {
	utils.BaseProps
	// Src is the primary image URL.
	Src string
	// Alt text for accessibility. Required for non-decorative images.
	Alt string
	// Width in CSS pixels. When set, the img tag includes a width attribute
	// and helps prevent layout shift (CLS).
	Width int
	// Height in CSS pixels. When set, the img tag includes a height attribute.
	Height int
	// FallbackSrc, when non-empty, is used if Src fails to load. Handled via
	// a CSP-safe event-delegation script — no inline onerror handler.
	FallbackSrc string
	// Lazy controls the loading attribute. When true (default), uses
	// loading="lazy". Set to false for above-the-fold images.
	Lazy bool
	// Rounded, when true, adds rounded-full for circular images (avatars, icons).
	// Defaults to false (rounded-md).
	Rounded bool
}

ImageProps configures an <img> element with lazy loading, aspect-ratio dimensions, and optional fallback source. The fallback is handled via a CSP-safe singleton script (no inline onerror handler) that swaps the src when the original fails to load.

func DefaultImageProps added in v0.7.0 

func DefaultImageProps() ImageProps

DefaultImageProps returns sensible defaults.

type ListNoteProps added in v0.6.0 

type ListNoteProps struct {
	utils.BaseProps
	// Shown is the number of items currently rendered.
	Shown int
	// Total is the unfiltered/cap-exceeding match count.
	Total int
}

ListNoteProps configures a "Showing N of M" truncation notice.

type ModalProps 

type ModalProps struct {
	utils.BaseProps
	Title string
	Open  bool
	Size  ModalSize
}

ModalProps configures a modal dialog

func DefaultModalProps 

func DefaultModalProps() ModalProps

DefaultModalProps returns sensible defaults

type ModalSize 

type ModalSize string

ModalSize defines the width of a modal dialog 

const (
	ModalSizeSM   ModalSize = "sm"
	ModalSizeMD   ModalSize = "md"
	ModalSizeLG   ModalSize = "lg"
	ModalSizeXL   ModalSize = "xl"
	ModalSize2XL  ModalSize = "2xl"  // largest available width (max-w-4xl)
	ModalSizeFull ModalSize = "full" // Deprecated: use ModalSize2XL
)

Modal size constants. ModalSize2XL is the largest size (max-w-4xl); ModalSizeFull is a deprecated alias kept for backward compatibility.

type OverlayKind added in v0.7.0 

type OverlayKind string

OverlayKind identifies whether an overlay is a Modal or a Drawer. 

const (
	// OverlayModal is the kind for Modal overlays.
	OverlayModal OverlayKind = "modal"
	// OverlayDrawer is the kind for Drawer overlays.
	OverlayDrawer OverlayKind = "drawer"
)

type PageHeaderProps added in v0.6.0 

type PageHeaderProps struct {
	utils.BaseProps
	Title string
	// Subtitle renders below the title in muted text.
	Subtitle string
	// Breadcrumb renders above the title (optional). Pass a navigation.Breadcrumbs
	// component or any custom breadcrumb markup.
	Breadcrumb templ.Component
	// Action renders on the right side of the title row (optional). Use for
	// primary buttons, back links, or status badges.
	Action templ.Component
}

PageHeaderProps configures a page-level header with title, optional subtitle, and optional breadcrumb/action slots.

func DefaultPageHeaderProps added in v0.6.0 

func DefaultPageHeaderProps() PageHeaderProps

DefaultPageHeaderProps returns sensible defaults

type RelativeTimeProps added in v0.7.0 

type RelativeTimeProps struct {
	utils.BaseProps
	// Time is the timestamp to display relative to now.
	Time time.Time
	// Title, when non-empty, overrides the default title (absolute time shown
	// on hover). Set to "" to use the formatted absolute timestamp.
	Title string
	// AutoRefresh defaults to true — the component injects a singleton script
	// that uses the native Intl.RelativeTimeFormat API to live-update the text
	// every 30 seconds. Also listens to htmx:afterSettle so newly-swapped
	// <time> elements are formatted immediately. This is progressive enhancement:
	// the server-rendered text is correct without JS; the script just keeps it
	// fresh. Set to false for static contexts (PDF, email, SEO-only).
	AutoRefresh bool
}

RelativeTimeProps configures a human-readable relative timestamp. The server renders the initial relative string ("2 hours ago"); the machine-readable datetime attribute is always present for screen readers and search engines.

func DefaultRelativeTimeProps added in v0.7.0 

func DefaultRelativeTimeProps() RelativeTimeProps

DefaultRelativeTimeProps returns sensible defaults. Time defaults to now, AutoRefresh defaults to true (live-updating via Intl.RelativeTimeFormat).

type SimpleCardProps 

type SimpleCardProps struct {
	utils.BaseProps
	Padding CardPadding
	// Body, when set, overrides children — same pattern as CardProps.Body.
	Body templ.Component
}

SimpleCardProps configures a simple card without header/footer

func DefaultSimpleCardProps 

func DefaultSimpleCardProps() SimpleCardProps

DefaultSimpleCardProps returns sensible defaults

type SortDirection added in v0.8.0 

type SortDirection string

SortDirection defines the sort order for a table column. 

const (
	SortNone SortDirection = ""
	SortAsc  SortDirection = "asc"
	SortDesc SortDirection = "desc"
)

type StatCardProps 

type StatCardProps struct {
	utils.BaseProps
	Value  string
	Label  string
	Change string
	Trend  TrendDirection
	// Icon optionally renders a leading icon tile (e.g. icons.Users).
	Icon icons.Name
	// Href, when non-empty, wraps the whole card in an <a> so the card acts
	// as a clickable navigation/filter link. Use this for dashboard stat cards
	// that drill down into a filtered view.
	Href string
	// HxGet, when set, adds hx-get to the card for HTMX-driven updates.
	// Mutually independent of Href — Href navigates, HxGet fetches partial HTML.
	HxGet string
	// HxTarget specifies the hx-target attribute (CSS selector for the swap target).
	HxTarget string
	// HxSwap specifies the hx-swap attribute (e.g. htmx.SwapInnerHTML, htmx.SwapOuterHTML).
	HxSwap htmx.SwapStyle
}

StatCardProps configures a dashboard stat card

func DefaultStatCardProps 

func DefaultStatCardProps() StatCardProps

DefaultStatCardProps returns sensible defaults

type Tab 

type Tab struct {
	ID      string
	Label   string
	Content templ.Component
}

Tab represents a single tab panel

type TableCell 

type TableCell struct {
	Text    string
	Content templ.Component
}

TableCell represents a single cell in a table row. When Content is set, it takes priority over Text for rendering.

type TableHeader added in v0.8.0 

type TableHeader struct {
	Label         string
	Sortable      bool
	SortDirection SortDirection
	Href          string // When set with Sortable=true, renders as <a> for server-side sorting
}

TableHeader defines a typed column header with optional sort capabilities. When TypedHeaders is set on TableProps, it takes precedence over Headers.

type TableProps 

type TableProps struct {
	utils.BaseProps
	Caption      string
	Headers      []string
	TypedHeaders []TableHeader // When set, takes precedence over Headers for sortable column rendering
	Rows         []TableRow
	Striped      bool
	Hover        bool
	Bordered     bool
	// Body, when set, overrides Rows for the <tbody> content. The component
	// should render <tr> elements directly — ideal for templ loops where each
	// row needs custom cell rendering:
	//
	//	@display.Table(display.TableProps{
	//	    Headers: headers,
	//	    Body:    messageRows(messages),
	//	})
	//	templ messageRows(messages []Message) {
	//	    for _, m := range messages {
	//	        <tr><td>{ m.Text }</td><td>{ m.Author }</td></tr>
	//	    }
	//	}
	Body templ.Component
}

TableProps configures a data table

func DefaultTableProps 

func DefaultTableProps() TableProps

DefaultTableProps returns sensible defaults

type TableRow 

type TableRow struct {
	Cells []TableCell
}

TableRow represents a single row in a table

func SimpleTableRow 

func SimpleTableRow(values ...string) TableRow

SimpleTableRow creates a row from string values for convenience

type TabsProps 

type TabsProps struct {
	utils.BaseProps
	Tabs        []Tab
	ActiveTabID string
	Variant     TabsVariant
	ClientSide  bool
}

TabsProps configures a tab component

func DefaultTabsProps 

func DefaultTabsProps() TabsProps

DefaultTabsProps returns sensible defaults

type TabsVariant 

type TabsVariant string

TabsVariant defines the visual style of tabs 

const (
	TabsDefault TabsVariant = "default"
	TabsPills   TabsVariant = "pills"
)

type TooltipPosition 

type TooltipPosition string

TooltipPosition defines where the tooltip appears relative to the trigger 

const (
	TooltipPositionTop    TooltipPosition = "top"
	TooltipPositionBottom TooltipPosition = "bottom"
	TooltipPositionLeft   TooltipPosition = "left"
	TooltipPositionRight  TooltipPosition = "right"
)

type TooltipProps 

type TooltipProps struct {
	utils.BaseProps
	Text     string
	Position TooltipPosition
}

TooltipProps configures a tooltip component

func DefaultTooltipProps 

func DefaultTooltipProps() TooltipProps

DefaultTooltipProps returns sensible defaults

type TrendDirection 

type TrendDirection string

TrendDirection represents the direction of a stat change 

const (
	TrendUp   TrendDirection = "up"
	TrendDown TrendDirection = "down"
	TrendNone TrendDirection = "none"
)

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.