Button Component

A versatile button component with multiple variants and sizes. Uses semantic class names with data attributes for styling.

Design Philosophy

The Button component follows Nitro conventions:

  • Semantic class names (btn, btn-primary, etc.)
  • Data attributes for variants (data-variant, data-size)
  • cls parameter merges with base classes
  • **attrs pass-through for any HTML attribute

Variants

Seven visual variants are available for different use cases:

Div(
    Button("Primary/Default", variant="primary"),
    Button("Secondary", variant="secondary"),
    Button("Ghost", variant="ghost"),
    Button("Destructive", variant="destructive"),
    Button("Outline", variant="outline"),
    Button("Link", variant="link"),
    cls="flex flex-wrap gap-2"
)

Sizes

Four sizes including an icon-only option:

Div(
    Button("Small", variant="sm"),
    Button("Default"),
    Button("Large", variant="lg"),
    Button(LucideIcon("plus")," Icon", variant="icon"),
    cls="flex flex-wrap items-center gap-2"
)

With Icons

Buttons can include icons before or after text:

Div(
    Button(LucideIcon("mail"), "Login with Email", variant="primary"),
    Button(LucideIcon("loader-2", cls="animate-spin"), "Loading...", disabled=True),
    Button("Next", LucideIcon("arrow-right"), variant="outline"),
    cls="flex flex-wrap gap-2"
)

Button Group

Group related buttons together:

Div(
    ButtonGroup(
        Button("Left", variant="outline"),
        Button("Center", variant="outline"),
        Button("Right", variant="outline"),
    ),
    ButtonGroup(
        Button("Top", variant="outline"),
        Button("Middle", variant="outline"),
        Button("Bottom", variant="outline"),
        orientation="vertical",
    ),
    cls="flex flex-wrap gap-2"
)

Disabled State

Buttons can be disabled:

Div(
    Button("Disabled Default", disabled=True),
    Button("Disabled Primary", variant="primary", disabled=True),
    Button("Disabled Destructive", variant="destructive", disabled=True),
    cls="flex flex-wrap gap-2"
)

API Reference


def Button(
    *children,                              # Button content (text, icons, etc.)
    variant: str = "default",               # default, primary, secondary, ghost,
                                            # destructive, outline, link
    size: str = "md",                       # sm, md, lg, icon
    disabled: bool = False,                 # Whether button is disabled
    cls: str = "",                          # Additional CSS classes
    **attrs                                 # Additional HTML attributes
) -> HtmlString

def ButtonGroup(
    *children,                              # Button components to group
    cls: str = "",                          # Additional CSS classes
    **attrs                                 # Additional HTML attributes
) -> HtmlString
← Back to Home