Button

Style-agnostic button component using CSS custom properties.

template 1 required 10 optional 3 slots 0 a11y rules

Reference Guide

Preview

variant
size
python
button(variant='primary', size='md', text='Primary')

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.variant = 'primary'
        self.size = 'md'
        self.text = 'Primary'
my_template.html
django
{% load theme_components %}
{% theme_button variant=variant size=size text=text %}

Props

NameTypeRequiredDefaultDescription
textstrrequired——
variantstrprimaryStyle variant (primary, secondary, danger, success, ghost, link, text)
sizestrmdSize variant (sm, md, lg)
tagstrbutton—
hrefOptional[str]——
extra_attrsstr——
css_prefixstr——
attrsdict——
slot_iconstr——
slot_contentstr——
slot_loadingstr——

Accessibility

No additional accessibility rules are declared for this component. Keep its required semantic elements and labels when supplying the context.

Slots

slot_icon slot_content slot_loading
Source & styles
FilePathNotes
templatedjust_theming/components/button.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 9 of this component's classes at line 150, 175, 181, 187, 194, 203, 212, 221, 231. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_components/components.cssDefines 8 of this component's classes at line 432, 456, 458, 462, 468, 470, 472, 473. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/scaffold.cssDefines 6 of this component's classes at line 279, 302, 307, 312, 324, 337. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/performance.cssDefines 1 of this component's classes at line 36. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--accent --accent-foreground --destructive --destructive-foreground --foreground --link --link-hover --primary --primary-foreground --primary-text --radius --ring --secondary --secondary-foreground
Template source — button.html
django
{% if tag == "a" %}
<a 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 href %}href="{{ href }}"{% endif %}
        {{ extra_attrs }}>
{% else %}
<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 %}
        {{ extra_attrs }}>
{% 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 %}
{% if tag == "a" %}</a>{% else %}</button>{% endif %}