Button Eingabe

Die button Komponente bietet anpassbare Schaltflächen in verschiedenen Stilen und Größen. Die Schaltflächen unterstützen Icons und Tooltips und können als Links oder als Schaltflächen zum Absenden von Formularen dienen.

WCAG AA

HTMX

Funktionen

Typen: primary, secondary, neutral, info, success, warning, danger, disabled, und link.
Größen: Fünf Größen (xs, s, m, l, xl) für unterschiedliche Anwendungsbereiche.
Designvarianten: Umriss, dezent und rund für individuelle Gestaltung.
Icons: Kann wahlweise vor oder nach der Beschriftung platziert werden oder im reinen Icon-Modus angezeigt werden.
HTMX-Integration: Native Unterstützung für asynchrone Anfragen.
Externe Links: Werden in einem neuen Tab mit den entsprechenden Sicherheitsattributen geöffnet.

HTML

RTL

Verwendung

Die Komponente wird über das button Tag eingebunden.

{% button label=_("Primary") type="primary" %}  {% button label=_("Primary") type="primary" outline=True %}  {% button label=_("Primary") type="primary" subtle=True %}  {% button label=_("Click me!") type="primary" size="xl" %}  {% button label=_("Primary") type="success" subtle=True round=True size="s" %}  {% button label=_("With Icon") type="primary" icon_name="rocket-launch" %} {% button label=_("With Icon") type="primary" icon_name="rocket-launch" icon_end=True %} {% button label=_("Icon only") type="primary" icon_name="rocket-launch" icon_only=True %} {% button label=_("Icon only") type="primary" icon_name="rocket-launch" icon_only=True round=True %}  {% button label=_("With tooltip") type="primary" tooltip="This is a button." %}  {% button label=_("As hyperlink") type="primary" request_url="#" %}

Parameter

config (ButtonConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
label	str	The text on the button or for Screenreader if the button shows only an icon.	None	True
tag_id	str	Eindeutige ID für das Targeting mit JavaScript/CSS.	""	False
request_url	str	URL for navigation (renders as ). Do not use together with htmx_config; use htmx_config.request_url instead for HTMX requests.	""	False
on_click	str	The name of the JavaScript method to be called when clicking on the button.	""	False
icon		Icon config for an optional icon.	None	False
icon_end	bool	True if the icon should be shown after the label, otherwise the icon is shown in front of the label.	False	False
icon_only	bool	True if only the icon should be shown. In this case the label will be used for Screenreader.	False	False
type	ButtonType ButtonType Extended color palette for buttons, includes 'link' variant. `primary` `secondary` `neutral` `info` `success` `warning` `danger` `link` Typen Dokumentation →	Defines the color of the button (primary, secondary, danger, etc.).	primary	False
size	Size Size Standard size scale used for spacing, icons, and component dimensions. `xs` `s` `m` `l` `xl` Typen Dokumentation →	Defines the size of the button.	m	False
outline	bool	True to use the outline design of the button.	False	False
subtle	bool	True to use the subtle design of the button.	False	False
round	bool	True for full rounded corners.	False	False
tooltip	str	Optional text for a tooltip shown on hover.	""	False
htmx_config		Configuration for asynchronous requests.	None	False
hidden	bool	True to render the button with CSS 'hidden' class for JS-controlled visibility.	False	False
disabled	bool	True to disable the button.	False	False
disabled_reason	str	Explanation why the button is disabled, shown as tooltip when hovering. Set to empty string to explicitly skip.	None	False
button_type	HtmlButtonType HtmlButtonType Native HTML button type attribute values. `button` `submit` `reset` Typen Dokumentation →	HTML-Typ-Attribut: „button“, „submit“ oder „reset“.	button	False
extra_classes	str	Zusätzliche CSS-Klassen, welche dem Button-Element hinzugefügt werden sollen.	""	False
data_attrs		List of custom data attributes to add to the button element.	[]	False
external	bool	True to open link in new tab (adds target='_blank' and rel='noopener'). Only applies when request_url is set.	False	False
aria_attrs	list[DataAttrConfig ]	List of ARIA attributes to add to the button element.	[]	False
hx_attrs	list[DataAttrConfig ]	List of HTMX attributes to add to the button element.	[]	False

ButtonConfig( tag_id="my-button", label="Click Me!", request_url="", on_click="calculateSomething()", icon=IconConfig("rocket-launch", "m"), icon_end=True, icon_only=False, type="primary", size="xl", outline=False, subtle=False, round=False, tooltip="Click to calculate something", htmx_config=HtmxConfig(...), hidden=False, button_type="submit", extra_classes="w-full", data_attrs=[DataAttrConfig(name="testid", value="submit-btn")], )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status		N/A

WCAG AA (Grundlagen)

Buttons, welche lediglich ein Icon besitzen und keinen Text, sollten ein beschreibendes aria-label besitzen.
Ein Button sollte so wie der Rest der Webseite, immer auch mit der Tastatur ansteuer- und bedienbar sein.
Für die korrekten Einhaltung der Semantik ist ein <button> einem interaktivem <div> Container immer vorzuziehen.