Button Components

class Button:
    """
    Interactive button component with Bootstrap styling and Dash integration.
    
    Args:
        children: Button text or content
        id (str): Component identifier for callbacks
        n_clicks (int): Number of times button has been clicked (for callbacks)
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        color (str): Button color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "link"
        size (str): Button size - "sm", "lg"
        outline (bool): Use outline style instead of solid
        active (bool): Force active state styling
        disabled (bool): Disable button interaction
        href (str): URL to navigate to when clicked
        target (str): Link target - "_blank", "_self", "_parent", "_top"
        external_link (bool): If True, behave like hyperlink; if False, behave like dcc.Link
        download (str): Filename for download links
        type (str): HTML button type - "button", "submit", "reset" (default depends on context)
        name (str): HTML name attribute for form submission
        value (str): HTML value attribute for form submission
        title (str): Tooltip text for the button
        rel (str): Link relationship attribute (for href links)
        key (str): React performance optimization key
    """
    def __init__(self, children=None, id=None, n_clicks=0, style=None, class_name=None,
                 color="primary", size=None, outline=False, active=False, disabled=False,
                 href=None, target=None, external_link=False, download=None, type=None,
                 name=None, value=None, title=None, rel=None, key=None, **kwargs): ...

class ButtonGroup:
    """
    Container for grouping buttons together.
    
    Args:
        children: Button components to group
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        size (str): Size for all buttons in group - "sm", "lg"
        vertical (bool): Stack buttons vertically instead of horizontally
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 size=None, vertical=False, **kwargs): ...

import dash_bootstrap_components as dbc
from dash import html, callback, Input, Output

# Basic button colors
buttons = html.Div([
    dbc.Button("Primary", color="primary", className="me-2"),
    dbc.Button("Secondary", color="secondary", className="me-2"),
    dbc.Button("Success", color="success", className="me-2"),
    dbc.Button("Info", color="info", className="me-2"),
    dbc.Button("Warning", color="warning", className="me-2"),
    dbc.Button("Danger", color="danger", className="me-2"),
    dbc.Button("Light", color="light", className="me-2"),
    dbc.Button("Dark", color="dark", className="me-2"),
    dbc.Button("Link", color="link"),
])

# Different button sizes
sizes = html.Div([
    dbc.Button("Large", size="lg", color="primary", className="me-2"),
    dbc.Button("Normal", color="primary", className="me-2"),
    dbc.Button("Small", size="sm", color="primary"),
])

# Outline style buttons
outline_buttons = html.Div([
    dbc.Button("Primary", color="primary", outline=True, className="me-2"),
    dbc.Button("Secondary", color="secondary", outline=True, className="me-2"),
    dbc.Button("Success", color="success", outline=True, className="me-2"),
    dbc.Button("Danger", color="danger", outline=True, className="me-2"),
])

from dash import callback, Input, Output

# Button with click counter
button_with_callback = html.Div([
    dbc.Button("Click me", id="example-button", color="primary", n_clicks=0),
    html.Div(id="click-output", className="mt-2"),
])

@callback(
    Output("click-output", "children"),
    [Input("example-button", "n_clicks")]
)
def update_click_count(n_clicks):
    if n_clicks:
        return f"Button clicked {n_clicks} times"
    return "Button not clicked yet"

# Different button states
states = html.Div([
    dbc.Button("Normal", color="primary", className="me-2"),
    dbc.Button("Active", color="primary", active=True, className="me-2"),
    dbc.Button("Disabled", color="primary", disabled=True),
])

# Horizontal button group
horizontal_group = dbc.ButtonGroup([
    dbc.Button("Left", color="primary"),
    dbc.Button("Middle", color="primary"),
    dbc.Button("Right", color="primary"),
])

# Vertical button group
vertical_group = dbc.ButtonGroup([
    dbc.Button("Top", color="secondary"),
    dbc.Button("Middle", color="secondary"),
    dbc.Button("Bottom", color="secondary"),
], vertical=True)

# Button group with different sizes
size_group = dbc.ButtonGroup([
    dbc.Button("Small", color="info"),
    dbc.Button("Group", color="info"),
    dbc.Button("Buttons", color="info"),
], size="sm")

# Buttons as links
link_buttons = html.Div([
    dbc.Button("Internal Link", href="/page", color="primary", className="me-2"),
    dbc.Button("External Link", href="https://example.com", external_link=True, 
               color="success", className="me-2"),
    dbc.Button("New Tab", href="/page", target="_blank", color="info"),
])

# Form submission buttons
form_buttons = dbc.Form([
    dbc.Input(placeholder="Enter text", className="mb-3"),
    html.Div([
        dbc.Button("Submit", type="submit", color="primary", className="me-2"),
        dbc.Button("Reset", type="reset", color="secondary", className="me-2"),
        dbc.Button("Cancel", type="button", color="danger", outline=True),
    ])
])

from dash import callback, Input, Output, State
import time

# Button with loading spinner
loading_button = html.Div([
    dbc.Button("Process Data", id="loading-button", color="primary", n_clicks=0),
    dcc.Loading(id="loading", children=[html.Div(id="loading-output")]),
])

@callback(
    [Output("loading-output", "children"), Output("loading-button", "children")],
    [Input("loading-button", "n_clicks")],
    prevent_initial_call=True
)
def process_data(n_clicks):
    if n_clicks:
        time.sleep(2)  # Simulate processing
        return f"Processing complete (click {n_clicks})", "Process Data"
    return "", "Process Data"

# Multiple button groups in toolbar
toolbar = html.Div([
    dbc.ButtonGroup([
        dbc.Button("Save", color="primary"),
        dbc.Button("Edit", color="secondary"),
        dbc.Button("Delete", color="danger"),
    ], className="me-2"),
    dbc.ButtonGroup([
        dbc.Button("Copy", color="info"),
        dbc.Button("Paste", color="info"),
    ], className="me-2"),
    dbc.ButtonGroup([
        dbc.Button("Undo", color="warning"),
        dbc.Button("Redo", color="warning"),
    ]),
], className="btn-toolbar")

from dash import callback, Input, Output

# Toggle button functionality
toggle_button = html.Div([
    dbc.Button("Toggle", id="toggle-button", color="primary", active=False),
    html.Div(id="toggle-status", className="mt-2"),
])

@callback(
    [Output("toggle-button", "active"), Output("toggle-status", "children")],
    [Input("toggle-button", "n_clicks")],
    [State("toggle-button", "active")],
    prevent_initial_call=True
)
def handle_toggle(n_clicks, active):
    new_active = not active
    status = "ON" if new_active else "OFF"
    return new_active, f"Status: {status}"