Button — Component Storybook

LIVE PREVIEW 8

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 1

Name	Type	Default
`text`	`str`	—

PROPS — OPTIONAL 7

Name	Type	Default
`variant`	`str`	primary
`size`	`str`	md
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_icon`	`str`	—
`slot_content`	`str`	—
`slot_loading`	`str`	—

AVAILABLE SLOTS 3

slot_icon slot_content slot_loading

CSS VARIABLES 33

--accent --accent-foreground --color-bg-card --color-border-strong --color-border-subtle --color-danger --color-primary --color-primary-glow --color-primary-hover --color-primary-text --color-success --color-surface --color-text --color-text-secondary --destructive --destructive-foreground --duration-fast --ease-out --font-medium --foreground --primary --primary-foreground --radius --radius-lg --radius-md --ring --secondary --secondary-foreground --shadow-sm --space-2 --text-base --text-sm --text-xs

TEMPLATE SOURCE

button.html

<button class="{{ css_prefix }}btn {{ css_prefix }}btn-{{ variant }} {{ css_prefix }}btn-{{ size }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
        {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
        {% if attrs.onclick %}onclick="{{ attrs.onclick }}"{% endif %}
        {% if attrs.type %}type="{{ attrs.type }}"{% endif %}>
    {% if slot_loading %}{{ slot_loading|safe }}{% else %}{% if slot_icon %}{{ slot_icon|safe }} {% endif %}{% if slot_content %}{{ slot_content|safe }}{% else %}{{ text }}{% endif %}{% endif %}
</button>