button

Buttons allow the user to take actions or make choices.

Base Button

The base button component:

btn = SingleValueFactory("btn", "Base button component") # Base button component

Button Colors

Button color variants using daisyUI semantic colors:

btn_colors = enums_to_simple_factory(btn, [SemanticColorBrand, SemanticColorStatus], "Button color variants using daisyUI semantic colors") # Button color variants

Button Styles

Different button style variants:

---

source

LinkStyle

 LinkStyle (value, names=None, module=None, qualname=None, type=None,
            start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

class LinkStyle(str, Enum):
    LINK = "link"

btn_styles = enums_to_simple_factory(btn, [OutlineStyle, DashStyle, SoftStyle, GhostStyle, LinkStyle], "Button style variants") # Button style variants

Button Sizes

Button size variants:

btn_sizes = enums_to_simple_factory(btn, [DaisyUINamedSize], "Button size variants from extra small to extra large") # Button size variants

Button Modifiers

Button modifier utilities:

btn_modifiers = SimpleFactory(
    {
        "wide": "btn-wide",
        "block": "btn-block",
        "square": "btn-square",
        "circle": "btn-circle"
    },
    "Button shape and layout modifiers"
) # Button modifiers

Button Behaviors

Button behavior utilities:

btn_behaviors = SimpleFactory(
    {
        "active": "btn-active",
        "disabled": "btn-disabled"
    },
    "Button behavior states (active, disabled)"
) # Button behavior states

Button Test Examples

---

source

test_button_basic_examples

 test_button_basic_examples ()

Test basic button utilities.

def test_button_basic_examples():
    """Test basic button utilities."""
    # Basic button
    assert str(btn) == "btn"
    
    # Test with modifiers
    assert str(btn.hover) == "hover:btn"
    assert str(btn.md) == "md:btn"
    assert str(btn.dark) == "dark:btn"

# Run the tests
test_button_basic_examples()

---

source

test_button_colors_examples

 test_button_colors_examples ()

Test button color variants.

def test_button_colors_examples():
    """Test button color variants."""
    # All color variants
    assert str(btn_colors.neutral) == "btn-neutral"
    assert str(btn_colors.primary) == "btn-primary"
    assert str(btn_colors.secondary) == "btn-secondary"
    assert str(btn_colors.accent) == "btn-accent"
    assert str(btn_colors.info) == "btn-info"
    assert str(btn_colors.success) == "btn-success"
    assert str(btn_colors.warning) == "btn-warning"
    assert str(btn_colors.error) == "btn-error"
    
    # With modifiers
    assert str(btn_colors.primary.hover) == "hover:btn-primary"
    assert str(btn_colors.success.focus) == "focus:btn-success"

# Run the tests
test_button_colors_examples()

---

source

test_button_styles_examples

 test_button_styles_examples ()

Test button style variants.

def test_button_styles_examples():
    """Test button style variants."""
    assert str(btn_styles.outline) == "btn-outline"
    assert str(btn_styles.dash) == "btn-dash"
    assert str(btn_styles.soft) == "btn-soft"
    assert str(btn_styles.ghost) == "btn-ghost"
    assert str(btn_styles.link) == "btn-link"

# Run the tests
test_button_styles_examples()

---

source

test_button_sizes_examples

 test_button_sizes_examples ()

Test button size variants.

def test_button_sizes_examples():
    """Test button size variants."""
    assert str(btn_sizes.xs) == "btn-xs"
    assert str(btn_sizes.sm) == "btn-sm"
    assert str(btn_sizes.md) == "btn-md"
    assert str(btn_sizes.lg) == "btn-lg"
    assert str(btn_sizes.xl) == "btn-xl"
    
    # With responsive modifiers
    assert str(btn_sizes.xs.sm) == "sm:btn-xs"
    assert str(btn_sizes.lg.md) == "md:btn-lg"

# Run the tests
test_button_sizes_examples()

---

source

test_button_modifiers_examples

 test_button_modifiers_examples ()

Test button modifier utilities.

def test_button_modifiers_examples():
    """Test button modifier utilities."""
    assert str(btn_modifiers.wide) == "btn-wide"
    assert str(btn_modifiers.block) == "btn-block"
    assert str(btn_modifiers.square) == "btn-square"
    assert str(btn_modifiers.circle) == "btn-circle"

# Run the tests
test_button_modifiers_examples()

---

source

test_button_behaviors_examples

 test_button_behaviors_examples ()

Test button behavior states.

def test_button_behaviors_examples():
    """Test button behavior states."""
    assert str(btn_behaviors.active) == "btn-active"
    assert str(btn_behaviors.disabled) == "btn-disabled"

# Run the tests
test_button_behaviors_examples()

---

source

test_button_basic_fasthtml_examples

 test_button_basic_fasthtml_examples ()

Test basic button examples from daisyUI v5 documentation.

def test_button_basic_fasthtml_examples():
    """Test basic button examples from daisyUI v5 documentation."""
    from fasthtml.common import Button, A, Input, Div
    
    # Basic button
    basic_btn = Button("Default", cls=str(btn))
    assert basic_btn.attrs['class'] == "btn"
    
    # Button wide
    wide_btn = Button("Wide", cls=combine_classes(btn, btn_modifiers.wide))
    assert "btn" in wide_btn.attrs['class']
    assert "btn-wide" in wide_btn.attrs['class']
    
    # Button block
    block_btn = Button("block", cls=combine_classes(btn, btn_modifiers.block))
    assert "btn" in block_btn.attrs['class']
    assert "btn-block" in block_btn.attrs['class']
    
    # Buttons with any HTML tags
    link_btn = A("Link", role="button", cls=str(btn))
    assert link_btn.attrs['class'] == "btn"
    assert link_btn.attrs['role'] == "button"
    
    submit_btn = Button("Button", type="submit", cls=str(btn))
    assert submit_btn.attrs['type'] == "submit"
    
    input_btn = Input(type="button", value="Input", cls=str(btn))
    assert input_btn.attrs['type'] == "button"
    assert input_btn.attrs['value'] == "Input"
    
    input_submit = Input(type="submit", value="Submit", cls=str(btn))
    assert input_submit.attrs['type'] == "submit"
    
    input_radio = Input(type="radio", aria_label="Radio", cls=str(btn))
    assert input_radio.attrs['type'] == "radio"
    assert input_radio.attrs['aria-label'] == "Radio"
    
    input_checkbox = Input(type="checkbox", aria_label="Checkbox", cls=str(btn))
    assert input_checkbox.attrs['type'] == "checkbox"
    
    input_reset = Input(type="reset", value="Reset", cls=str(btn))
    assert input_reset.attrs['type'] == "reset"
    
    # Return all elements in a Div
    return Div(
        basic_btn,
        wide_btn,
        block_btn,
        link_btn,
        submit_btn,
        input_btn,
        input_submit,
        input_radio,
        input_checkbox,
        input_reset
    )

# Run the tests
test_button_basic_fasthtml_examples()

<div>
<button class="btn">Default</button><button class="btn btn-wide">Wide</button><button class="btn btn-block">block</button><a href="#" role="button" class="btn">Link</a><button type="submit" class="btn">Button</button>  <input type="button" value="Input" class="btn">
  <input type="submit" value="Submit" class="btn">
  <input type="radio" aria-label="Radio" class="btn">
  <input type="checkbox" aria-label="Checkbox" class="btn">
  <input type="reset" value="Reset" class="btn">
</div>

test_func = test_button_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_button_sizes_fasthtml_examples

 test_button_sizes_fasthtml_examples ()

Test button size variations and responsive buttons.

def test_button_sizes_fasthtml_examples():
    """Test button size variations and responsive buttons."""
    from fasthtml.common import Button, Div
    
    # Button sizes
    xs_btn = Button("Xsmall", cls=combine_classes(btn, btn_sizes.xs))
    assert "btn-xs" in xs_btn.attrs['class']
    
    sm_btn = Button("Small", cls=combine_classes(btn, btn_sizes.sm))
    assert "btn-sm" in sm_btn.attrs['class']
    
    md_btn = Button("Medium", cls=str(btn))
    assert md_btn.attrs['class'] == "btn"
    
    lg_btn = Button("Large", cls=combine_classes(btn, btn_sizes.lg))
    assert "btn-lg" in lg_btn.attrs['class']
    
    xl_btn = Button("Xlarge", cls=combine_classes(btn, btn_sizes.xl))
    assert "btn-xl" in xl_btn.attrs['class']
    
    # Responsive button
    responsive_btn = Button(
        "Responsive",
        cls=combine_classes(
            btn,
            btn_sizes.xs,
            btn_sizes.sm.sm,
            btn_sizes.md.md,
            btn_sizes.lg.lg,
            btn_sizes.xl.xl
        )
    )
    assert "btn" in responsive_btn.attrs['class']
    assert "btn-xs" in responsive_btn.attrs['class']
    assert "sm:btn-sm" in responsive_btn.attrs['class']
    assert "md:btn-md" in responsive_btn.attrs['class']
    assert "lg:btn-lg" in responsive_btn.attrs['class']
    assert "xl:btn-xl" in responsive_btn.attrs['class']
    
    # Return all elements in a Div
    return Div(
        xs_btn,
        sm_btn,
        md_btn,
        lg_btn,
        xl_btn,
        responsive_btn
    )

# Run the tests
test_button_sizes_fasthtml_examples()

<div>
<button class="btn btn-xs">Xsmall</button><button class="btn btn-sm">Small</button><button class="btn">Medium</button><button class="btn btn-lg">Large</button><button class="btn btn-xl">Xlarge</button><button class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl">Responsive</button></div>

test_func = test_button_sizes_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_button_colors_variants_fasthtml_examples

 test_button_colors_variants_fasthtml_examples ()

Test button color variants including soft, outline, and dash styles.

def test_button_colors_variants_fasthtml_examples():
    """Test button color variants including soft, outline, and dash styles."""
    from fasthtml.common import Button, Div
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.spacing import p
    
    # Button colors
    neutral_btn = Button("Neutral", cls=combine_classes(btn, btn_colors.neutral))
    assert "btn-neutral" in neutral_btn.attrs['class']
    
    primary_btn = Button("Primary", cls=combine_classes(btn, btn_colors.primary))
    assert "btn-primary" in primary_btn.attrs['class']
    
    secondary_btn = Button("Secondary", cls=combine_classes(btn, btn_colors.secondary))
    assert "btn-secondary" in secondary_btn.attrs['class']
    
    accent_btn = Button("Accent", cls=combine_classes(btn, btn_colors.accent))
    assert "btn-accent" in accent_btn.attrs['class']
    
    info_btn = Button("Info", cls=combine_classes(btn, btn_colors.info))
    assert "btn-info" in info_btn.attrs['class']
    
    success_btn = Button("Success", cls=combine_classes(btn, btn_colors.success))
    assert "btn-success" in success_btn.attrs['class']
    
    warning_btn = Button("Warning", cls=combine_classes(btn, btn_colors.warning))
    assert "btn-warning" in warning_btn.attrs['class']
    
    error_btn = Button("Error", cls=combine_classes(btn, btn_colors.error))
    assert "btn-error" in error_btn.attrs['class']
    
    # Soft buttons
    soft_default = Button("Default", cls=combine_classes(btn, btn_styles.soft))
    assert "btn-soft" in soft_default.attrs['class']
    
    soft_primary = Button("Primary", cls=combine_classes(btn, btn_styles.soft, btn_colors.primary))
    assert "btn-soft" in soft_primary.attrs['class']
    assert "btn-primary" in soft_primary.attrs['class']
    
    # Outline buttons
    outline_default = Button("Default", cls=combine_classes(btn, btn_styles.outline))
    assert "btn-outline" in outline_default.attrs['class']
    
    outline_primary = Button("Primary", cls=combine_classes(btn, btn_styles.outline, btn_colors.primary))
    assert "btn-outline" in outline_primary.attrs['class']
    assert "btn-primary" in outline_primary.attrs['class']
    
    # Dash buttons
    dash_default = Button("Default", cls=combine_classes(btn, btn_styles.dash))
    assert "btn-dash" in dash_default.attrs['class']
    
    dash_primary = Button("Primary", cls=combine_classes(btn, btn_styles.dash, btn_colors.primary))
    assert "btn-dash" in dash_primary.attrs['class']
    assert "btn-primary" in dash_primary.attrs['class']
    
    # Neutral button with outline or dash style on white background
    white_bg_container = Div(
        Button("Outline", cls=combine_classes(btn, btn_colors.neutral, btn_styles.outline)),
        Button("Dash", cls=combine_classes(btn, btn_colors.neutral, btn_styles.dash)),
        cls=combine_classes(bg.white, p._6)
    )
    assert "bg-white" in white_bg_container.attrs['class']
    assert "p-6" in white_bg_container.attrs['class']
    
    # Return all elements in a Div
    return Div(
        neutral_btn,
        primary_btn,
        secondary_btn,
        accent_btn,
        info_btn,
        success_btn,
        warning_btn,
        error_btn,
        soft_default,
        soft_primary,
        outline_default,
        outline_primary,
        dash_default,
        dash_primary,
        white_bg_container
    )

# Run the tests
test_button_colors_variants_fasthtml_examples()

<div>
<button class="btn btn-neutral">Neutral</button><button class="btn btn-primary">Primary</button><button class="btn btn-secondary">Secondary</button><button class="btn btn-accent">Accent</button><button class="btn btn-info">Info</button><button class="btn btn-success">Success</button><button class="btn btn-warning">Warning</button><button class="btn btn-error">Error</button><button class="btn btn-soft">Default</button><button class="btn btn-soft btn-primary">Primary</button><button class="btn btn-outline">Default</button><button class="btn btn-outline btn-primary">Primary</button><button class="btn btn-dash">Default</button><button class="btn btn-dash btn-primary">Primary</button>  <div class="bg-white p-6">
<button class="btn btn-neutral btn-outline">Outline</button><button class="btn btn-neutral btn-dash">Dash</button>  </div>
</div>

test_func = test_button_colors_variants_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_button_states_fasthtml_examples

 test_button_states_fasthtml_examples ()

Test button states including active, disabled, ghost, and link.

def test_button_states_fasthtml_examples():
    """Test button states including active, disabled, ghost, and link."""
    from fasthtml.common import Button, Div
    
    # Active buttons
    active_default = Button("Default", cls=combine_classes(btn, btn_behaviors.active))
    assert "btn-active" in active_default.attrs['class']
    
    active_primary = Button("Primary", cls=combine_classes(btn, btn_behaviors.active, btn_colors.primary))
    assert "btn-active" in active_primary.attrs['class']
    assert "btn-primary" in active_primary.attrs['class']
    
    # Ghost and link buttons
    ghost_btn = Button("Ghost", cls=combine_classes(btn, btn_styles.ghost))
    assert "btn-ghost" in ghost_btn.attrs['class']
    
    link_btn = Button("Link", cls=combine_classes(btn, btn_styles.link))
    assert "btn-link" in link_btn.attrs['class']
    
    # Disabled buttons
    disabled_attr = Button("Disabled using attribute", cls=str(btn), disabled="disabled")
    assert disabled_attr.attrs['disabled'] == "disabled"
    
    disabled_class = Button(
        "Disabled using class name",
        cls=combine_classes(btn, btn_behaviors.disabled),
        tabindex="-1",
        role="button",
        aria_disabled="true"
    )
    assert "btn-disabled" in disabled_class.attrs['class']
    assert disabled_class.attrs['tabindex'] == "-1"
    assert disabled_class.attrs['aria-disabled'] == "true"
    
    # Return all elements in a Div
    return Div(
        active_default,
        active_primary,
        ghost_btn,
        link_btn,
        disabled_attr,
        disabled_class
    )

# Run the tests
test_button_states_fasthtml_examples()

<div>
<button class="btn btn-active">Default</button><button class="btn btn-active btn-primary">Primary</button><button class="btn btn-ghost">Ghost</button><button class="btn btn-link">Link</button><button disabled="disabled" class="btn">Disabled using attribute</button><button tabindex="-1" role="button" aria-disabled="true" class="btn btn-disabled">Disabled using class name</button></div>

test_func = test_button_states_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_button_shapes_fasthtml_examples

 test_button_shapes_fasthtml_examples ()

Test square and circle button shapes with SVG icons.

def test_button_shapes_fasthtml_examples():
    """Test square and circle button shapes with SVG icons."""
    from fasthtml.common import Button, Div
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    
    # Create reusable heart icon SVG
    heart_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        stroke_width="2.5",
        stroke="currentColor",
        cls=str(size_util("1.2em"))
    )
    
    # Square button
    square_btn = Button(
        heart_icon,
        cls=combine_classes(btn, btn_modifiers.square)
    )
    assert "btn-square" in square_btn.attrs['class']
    
    # Circle button
    circle_btn = Button(
        heart_icon,
        cls=combine_classes(btn, btn_modifiers.circle)
    )
    assert "btn-circle" in circle_btn.attrs['class']
    
    # Return all elements in a Div
    return Div(
        square_btn,
        circle_btn
    )

# Run the tests
test_button_shapes_fasthtml_examples()

<div>
<button class="btn btn-square"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button class="btn btn-circle"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div>

test_func = test_button_shapes_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_button_with_content_fasthtml_examples

 test_button_with_content_fasthtml_examples ()

Test buttons with icons and loading spinners.

def test_button_with_content_fasthtml_examples():
    """Test buttons with icons and loading spinners."""
    from fasthtml.common import Button, Span, Div
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_daisyui.components.feedback.loading import loading, loading_styles
    
    # Create reusable heart icon SVG
    heart_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        stroke_width="2.5",
        stroke="currentColor",
        cls=str(size_util("1.2em"))
    )
    
    # Button with icon before text
    icon_start_btn = Button(
        heart_icon,
        "Like",
        cls=str(btn)
    )
    assert icon_start_btn.attrs['class'] == "btn"
    assert len(icon_start_btn.children) == 2  # Icon and text
    
    # Button with icon after text
    icon_end_btn = Button(
        "Like",
        heart_icon,
        cls=str(btn)
    )
    assert icon_end_btn.attrs['class'] == "btn"
    assert len(icon_end_btn.children) == 2  # Text and icon
    
    # Button with loading spinner (using daisyUI loading classes)
    loading_square_btn = Button(
        Span(cls=combine_classes(loading, loading_styles.spinner)),
        cls=combine_classes(btn, btn_modifiers.square)
    )
    assert "btn-square" in loading_square_btn.attrs['class']
    assert "loading loading-spinner" in loading_square_btn.children[0].attrs['class']
    
    loading_text_btn = Button(
        Span(cls=combine_classes(loading, loading_styles.spinner)),
        loading,
        cls=str(btn)
    )
    assert loading_text_btn.attrs['class'] == "btn"
    assert len(loading_text_btn.children) == 2  # Spinner and text
    
    # Return all elements in a Div
    return Div(
        icon_start_btn,
        icon_end_btn,
        loading_square_btn,
        loading_text_btn
    )

# Run the tests
test_button_with_content_fasthtml_examples()

<div>
<button class="btn"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" stroke-linecap="round" stroke-linejoin="round"></path></svg>Like</button><button class="btn">Like<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><button class="btn btn-square"><span class="loading loading-spinner"></span></button><button class="btn"><span class="loading loading-spinner"></span>loading</button></div>

test_func = test_button_with_content_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()