ButtonLink
Synonyme: Button-Link, Pseudo-Link
Beschreibung: Die ButtonLink-Komponente ist semantisch ein Button, besitzt aber sowohl visuell als auch funktional das Verhalten eines Links. Sie kombiniert alle relevanten Properties des Buttons mit den Design-Eigenschaften eines Links und ermöglicht damit eine flexiblere Gestaltung interaktiver Elemente.
Beispiel
Ein Button, der wie ein Link aussieht und sich wie ein Link verhält:
<KolButtonLink _label="Schalter sieht wie ein Link aus" />Barrierefreiheit
- Die Komponente ist semantisch ein Button, was wichtig für die Barrierefreiheit ist – Screenreader präsentieren das Element korrekt als Button.
- Das visual Link-Design wird durch CSS umgesetzt und beeinflusst nicht die semantische Rolle.
- Die Komponente unterstützt alle Standard-Button-Eigenschaften für Zugänglichkeit wie
_disabled,_ariaExpanded,_ariaSelected,_ariaControlsund_ariaDescription. - Keyboard-Navigation und Fokusmanagement folgen den Standard-Button-Mustern.
Links und Referenzen
Verwendung
Unterschied zu Button und Link
Die ButtonLink-Komponente eignet sich für Fälle, in denen der semantische Aufbau eines Buttons erforderlich ist, aber die visuelle Erscheinung eines Links gewünscht ist:
- Button: Semantisch und visuell ein Button – verwenden Sie diesen für primäre Handlungen.
- Link: Semantisch und visuell ein Link – verwenden Sie diesen für Navigation.
- ButtonLink: Semantisch ein Button, visuell ein Link – verwenden Sie diesen, wenn Sie ein Link-ähnliches Erscheinungsbild mit Button-Semantik benötigen.
Best Practices / Empfehlungen
- Nutzen Sie ButtonLink nur, wenn es fachlich sinnvoll ist, ein Link-ähnliches Erscheinungsbild mit Button-Semantik zu verbinden.
- Verwenden Sie das
_disabled-Property mit Begründung – deaktivierte ButtonLinks sollten erklären, warum sie nicht verfügbar sind. - Icons sollten über das
_icons-Property sparsam und aussagekräftig eingesetzt werden. - Verwenden Sie das
_on-Property mit einem Click-Callback, um die Komponente zu steuern – nicht_href.
Anwendungsfälle
- Kontextuelle Aktionen, die Link-ähnlich aussehen sollen, aber semantisch Buttons erfordern
- Navigationen in Tabellen oder Listen, die Button-Semantik für Accessibility benötigen
- Geschäftslogik-Triggern, die optisch unauffällig wie Links wirken sollen
Konstruktion / Technik
Playground
<KolButtonLink _label="ButtonLink" />Funktionalitäten (mit Code)
Basis-ButtonLink
Ein einfacher ButtonLink mit grundlegenden Eigenschaften:
<KolButtonLink _label="Funktioniert wie ein Button" />Mit Icons
ButtonLink mit Icons vor und/oder nach dem Label:
<KolButtonLink _icons="fa-solid fa-heart" _label="Mit Icon" />Mit verstecktem Label
Das Label wird versteckt und nur als Tooltip angezeigt:
<KolButtonLink _hideLabel={true} _label="Tooltip" />Deaktiviert
Ein deaktivierter ButtonLink reagiert nicht auf Interaktionen:
<KolButtonLink _disabled={true} _label="Deaktiviert" />Mit Tastaturkürzel
Ein visueller Hinweis auf ein verfügbares Tastaturkürzel:
<KolButtonLink _label="Mit Shortkey" _shortKey="s" />ARIA-Attribute
ButtonLink mit ARIA-Attributen für erweiterte Semantik:
<KolButtonLink _ariaControls="menu-content" _ariaExpanded={false} _label="Menü" />Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
click | Element wird angeklickt | _value-Property |
onMouseDown | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Elements befindet | – |
API
Overview
The ButtonLink component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.
A button can be disabled, therefore the ButtonLink also has the _disabled property. How this is styled visually is determined by the UX designer.
Instead of using _href as with a regular link, the ButtonLink's behavior is controlled via a click callback using the _on property.
A link has the target property which optionally opens the link in a new window/tab. This behavior is not yet implemented.
Since a link, unlike a button, is not offered in multiple variants (primary, secondary, etc.), the _customClass and _variant properties are not available.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component's interactive element. | string | undefined | undefined |
_ariaControls | _aria-controls | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string | undefined | undefined |
_ariaDescription | _aria-description | Defines the value for the aria-description attribute. | string | undefined | undefined |
_ariaExpanded | _aria-expanded | Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) | boolean | undefined | undefined |
_ariaSelected | _aria-selected | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | boolean | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_hideLabel | _hide-label | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | boolean | undefined | false |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined | undefined |
_inline | _inline | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | boolean | undefined | true |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot. | string | undefined |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Gibt die EventCallback-Funktionen für die Button-Events an. | undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; } | undefined |
_role | _role | [DEPRECATED] We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future. Defines the role of the components primary element. | "tab" | "treeitem" | undefined | undefined |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_type | _type | Defines either the type of the component or of the components interactive element. | "button" | "reset" | "submit" | undefined | 'button' |
_value | _value | Defines the value of the element. | boolean | null | number | object | string | undefined | undefined |
_variant | _variant | Defines which variant should be used for presentation. | string | undefined | undefined |
Methods
click
click() => Promise<void>
Clicks the primary interactive element inside this component.
Returns
Type: Promise<void>
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
getValue() => Promise<StencilUnknown>
Returns the current value.
Returns
Type: Promise<StencilUnknown>
Slots
| Slot | Description |
|---|---|
"expert" | Custom label content, e.g. for rich text or icons. |