button

Documentation

Overview

templ: version: v0.3.943

Index

• func Button(props ...ButtonProps) templ.Component
• func Buttons(props ...ButtonsProps) templ.Component
• type Alignment
• type ButtonProps
• type ButtonsProps
• type ButtonsSize
• type Color
• type Size

Functions

func Button

func Button(props ...ButtonProps) templ.Component

Button renders individual button elements.

This component renders Bulma's .button class with extensive customization options. Can render as <button>, <a>, or <input> elements based on props. Supports all Bulma button colors, sizes, states, and styling modifiers. Perfect for forms, navigation, calls-to-action, and interactive elements.

func Buttons

func Buttons(props ...ButtonsProps) templ.Component

Buttons renders container for button groups.

This component renders Bulma's .buttons class which groups multiple button elements together. Provides alignment, uniform sizing, and addon connection options. Perfect for toolbars, form actions, and button collections that need consistent spacing and alignment.

Types

type Alignment

type Alignment string

Alignment represents button alignment within containers

const (
	IsCentered Alignment = "is-centered" // Center align buttons
	IsRight    Alignment = "is-right"    // Right align buttons
)

type ButtonProps

type ButtonProps struct {
	// Optional HTML id attribute for the button
	ID string

	// List of additional CSS classes to apply to the button
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Button color variant (primary, success, danger, etc.)
	Color Color

	// Render as <a> tag instead of <button>
	IsAnchor bool

	// Render as <input> tag instead of <button>
	IsInput bool

	// HTML type attribute (button, submit, reset, etc.)
	Type string

	// Button spans full width of container
	IsFullwidth bool

	// Use responsive button sizing across breakpoints
	IsResponsive bool

	// Button size (small, normal, medium, large)
	Size Size

	// Apply active state styling
	IsActive bool

	// Expand to fill available width
	IsExpanded bool

	// Apply focused state styling
	IsFocused bool

	// Apply hovered state styling
	IsHovered bool

	// Apply selected state styling
	IsSelected bool

	// Apply bold text styling
	IsBold bool

	// Transparent background with border
	IsGhost bool

	// Invert text and background colors
	IsInverted bool

	// Show loading spinner, disable interaction
	IsLoading bool

	// Outlined style with transparent background
	IsOutlined bool

	// Apply rounded corners
	IsRounded bool

	// Apply soft/subtle styling
	IsSoft bool

	// Non-interactive button for labels/alignment
	IsStatic bool
}

ButtonProps defines configuration for individual button elements.

Use this type to configure Bulma button elements with various colors, sizes, states, and styling options. Can render as button, anchor, or input elements based on props.

type ButtonsProps

type ButtonsProps struct {
	// Optional HTML id attribute for the button group
	ID string

	// List of additional CSS classes to apply to the group
	Class []string

	// Additional arbitrary HTML attributes
	Attributes templ.Attributes

	// Horizontal alignment of buttons (centered, right)
	Alignment Alignment

	// Uniform size for all buttons in group
	Size ButtonsSize

	// Connect buttons together without gaps
	HasAddons bool
}

ButtonsProps defines configuration for button group containers. Use this type to configure Bulma .buttons containers that group multiple button elements with consistent sizing, alignment, and connection options.

type ButtonsSize

type ButtonsSize string

ButtonsSize represents size modifiers for button groups

const (
	AreSmall  ButtonsSize = "are-small"  // All buttons in group are small
	AreMedium ButtonsSize = "are-medium" // All buttons in group are medium
	AreLarge  ButtonsSize = "are-large"  // All buttons in group are large
)

type Color

type Color string

Color represents button color variants

const (
	IsBlack   Color = "is-black"   // Black button
	IsDark    Color = "is-dark"    // Dark button
	IsDanger  Color = "is-danger"  // Danger/error button (red)
	IsInfo    Color = "is-info"    // Info button (blue)
	IsLight   Color = "is-light"   // Light button
	IsLink    Color = "is-link"    // Link-style button
	IsPrimary Color = "is-primary" // Primary button (brand color)
	IsSuccess Color = "is-success" // Success button (green)
	IsText    Color = "is-text"    // Text-only button
	IsWarning Color = "is-warning" // Warning button (yellow)
	IsWhite   Color = "is-white"   // White button
)

type Size

type Size string

Size represents button size modifiers

const (
	IsSmall  Size = "is-small"  // Small button size
	IsNormal Size = "is-normal" // Normal button size (default)
	IsMedium Size = "is-medium" // Medium button size
	IsLarge  Size = "is-large"  // Large button size
)