emptystate

Documentation

Overview

Package emptystate provides an EmptyState component for displaying "no data" or "empty results" scenarios with optional icons, text, and actions.

Basic Usage

emptystate.EmptyState(
    emptystate.WithTitle("No data available"),
    emptystate.WithDescription("Get started by adding your first item"),
)

With Icon and Action

emptystate.EmptyState(
    emptystate.WithIcon(icons.Database()),
    emptystate.WithTitle("No users found"),
    emptystate.WithDescription("Create a new user to get started"),
    emptystate.WithAction(
        button.Primary(g.Text("Add User")),
    ),
)

Index

• func EmptyState(opts ...Option) g.Node
• type Option
  • func WithAction(action g.Node) Option
  • func WithAttr(attrs ...g.Node) Option
  • func WithClass(class string) Option
  • func WithDescription(description string) Option
  • func WithIcon(icon g.Node) Option
  • func WithTitle(title string) Option
• type Props

Functions

func EmptyState

func EmptyState(opts ...Option) g.Node

EmptyState creates an empty state component for displaying "no data" scenarios.

The component is centered and includes optional icon, title, description, and action button. It's commonly used in tables, lists, and search results when no data is available.

Example:

emptystate.EmptyState(
    emptystate.WithIcon(
        html.Div(
            html.Class("w-16 h-16 mx-auto text-muted-foreground/50"),
            icons.FolderOpen(icons.WithSize("64")),
        ),
    ),
    emptystate.WithTitle("No items found"),
    emptystate.WithDescription("Try adjusting your search or filter criteria"),
    emptystate.WithAction(
        button.Outline(
            g.Text("Clear Filters"),
            button.WithAttr(g.Attr("onclick", "clearFilters()")),
        ),
    ),
)

Types

type Option

type Option func(*Props)

Option is a functional option for configuring the EmptyState component.

func WithAction

func WithAction(action g.Node) Option

WithAction sets the action button or component for the empty state.

func WithAttr

func WithAttr(attrs ...g.Node) Option

WithAttr adds custom HTML attributes to the empty state container.

func WithClass

func WithClass(class string) Option

WithClass adds additional CSS classes to the empty state container.

func WithDescription

func WithDescription(description string) Option

WithDescription sets the description text for the empty state.

func WithIcon

func WithIcon(icon g.Node) Option

WithIcon sets the icon to display at the top of the empty state.

func WithTitle

func WithTitle(title string) Option

WithTitle sets the title text for the empty state.

type Props

type Props struct {
	Icon        g.Node
	Title       string
	Description string
	Action      g.Node
	Class       string
	Attrs       []g.Node
}

Props defines the properties for the EmptyState component.