LinkButton

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Link mit Button-Stil, stilisierter Link

Beschreibung: Die LinkButton-Komponente ist semantisch ein Link, hat aber das visuelle Erscheinungsbild eines Buttons. Sie kombiniert die Semantik der Link-Komponente mit den Design-Eigenschaften der Button-Komponente und eignet sich zur Verlinkung mit Betonung durch Button-artige Darstellung.

Beispiel

Standard-LinkButton mit verschiedenen Varianten:

Barrierefreiheit

Die LinkButton-Komponente wird als Link-Element renders und ist daher vollständig auf Barrierefreiheit optimiert:

• Die Komponente behält die semantische Rolle des Links, was von assistiven Technologien korrekt erkannt wird.
• Das Label (_label) wird als sichtbarer Text ausgegeben und als aria-label für Screenreader bereitgestellt.
• Die Komponente unterstützt vollständig Tastaturnavigation (Tab, Enter).
• Icons können zur visuellen Verdeutlichung hinzugefügt werden, ohne die Barrierefreiheit zu beeinträchtigen.
• Das Attribut _hideLabel ermöglicht die visuell versteckte Beschriftung mit automatisch angezeigtem Tooltip beim Fokussieren.
• Das Attribut _shortKey kann zur Anzeige von Tastaturkürzeln genutzt werden.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert die LinkButton.
Enter	Öffnet den Hyperlink.
Space	Öffnet den Hyperlink (optional).

Best Practices / Empfehlungen

• Semantik über Stil: Verwenden Sie LinkButton nur, wenn Sie semantisch einen Link benötigen, die Benutzer:innen aber eine Button-ähnliche Darstellung erwarten.
• Button vs. LinkButton: Verwenden Sie einen echten für Aktionen (speichern, löschen), und LinkButton für Navigation.
• Aussagekräftige Labels: Der Link-Text sollte das Ziel oder den Kontext der Navigation deutlich machen (z. B. „Zur Startseite" statt „Hier").
• Zielangabe: Verwenden Sie _target="_blank" nur, wenn sich der Link tatsächlich in einem neuen Tab öffnen soll, und kommunizieren Sie dies deutlich im Label.
• Download-Links: Für Download-Links verwenden Sie _download="dateiname" um dem Browser zu signalisieren, dass eine Datei heruntergeladen werden soll.
• Externe Links kennzeichnen: Nutzen Sie Icons oder klare Beschriftungen, um externe Links von internen zu unterscheiden.

Anwendungsfälle

• Navigation zu primären oder hervorgehobenen Bereichen einer Anwendung
• Call-to-Action-Links, die visuell als Buttons prominenter erscheinen sollen
• Navigation in Footern oder Sidebars mit Button-ähnlichem Styling
• Kontextuelle Navigation mit Button-Styling (z. B. „Weitere Informationen")
• Rückwärts-Navigation oder ähnliche primäre Navigationsziele

FAQ

Wann sollte ich LinkButton statt Button verwenden? Verwenden Sie LinkButton, wenn Sie semantisch einen Link benötigen (Navigation), diesen aber mit Button-Styling betonen möchten. Für echte Aktionen (wie Formularabsendung) verwenden Sie stattdessen einen Button.

Kann ich LinkButton mit Icons verwenden? Ja, das Attribut _icons unterstützt Icon-Klassennamen (z. B. _icons="fa-solid fa-arrow-right").

Was ist der Unterschied zu button-link? LinkButton ist semantisch ein Link mit Button-Styling. ist dagegen semantisch ein Button mit Link-Styling.

Konstruktion / Technik

Playground

Erkunden Sie die verschiedenen Konfigurationen der LinkButton-Komponente:

<kol-link-button
 _href="https://example.com"
 _label="Standard LinkButton"
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="Mit Icon"
 _icons="fa-solid fa-arrow-right"
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="In neuem Tab"
 _target="_blank"
>
</kol-link-button>

<kol-link-button
 _href="document.pdf"
 _label="PDF herunterladen"
 _download="document.pdf"
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="Deaktiviert"
 _disabled
>
</kol-link-button>

Funktionalitäten (mit Code)

Basis-Variante

Standard-LinkButton ohne Styling-Variante:

<kol-link-button
 _href="https://example.com"
 _label="Normal"
 _variant="normal"
>
</kol-link-button>

Varianten

Die Darstellung wird über _variant gesteuert:

<kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
<kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
<kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
<kol-link-button _href="#" _label="Tertiary" _variant="tertiary"></kol-link-button>
<kol-link-button _href="#" _label="Danger" _variant="danger"></kol-link-button>
<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
<kol-link-button _href="#" _label="Custom" _variant="custom" _custom-class="custom-style"></kol-link-button>

Icons

Icons können über das Attribut _icons hinzugefügt werden:

<kol-link-button
 _href="https://example.com"
 _label="Mit Icon"
 _icons="fa-solid fa-arrow-right"
>
</kol-link-button>

Zielverhalten

Kontrolle darüber, wo der Link öffnet:

<kol-link-button
 _href="https://example.com"
 _label="Im gleichen Tab"
 _target="_self"
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="Im neuen Tab"
 _target="_blank"
>
</kol-link-button>

Download-Links

Signalisieren Sie dem Browser, dass eine Datei heruntergeladen werden soll:

<kol-link-button
 _href="/files/dokument.pdf"
 _label="PDF herunterladen"
 _download="dokument.pdf"
>
</kol-link-button>

Zustände

Die Komponente unterstützt verschiedene Zustände:

<kol-link-button
 _href="https://example.com"
 _label="Standard"
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="Deaktiviert"
 _disabled
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="Mit verstecktem Label"
 _hide-label
>
</kol-link-button>

ARIA-Attribute

Zusätzliche Accessibility-Informationen:

<kol-link-button
 _href="https://example.com"
 _label="Aktuelle Seite"
 _aria-current-value="page"
>
</kol-link-button>

<kol-link-button
 _href="https://example.com"
 _label="Mit Beschreibung"
 _aria-description="Navigiert zur Dokumentation"
>
</kol-link-button>

Tastaturkürzel

Anzeige von Tastaturkürzeln:

<kol-link-button
 _href="https://example.com"
 _label="Startseite"
 _short-key="H"
>
</kol-link-button>

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Element wird angeklickt	_href-Wert

API

Overview

The LinkButton component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.

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
_ariaCurrentValue	_aria-current-value	Defines the value for the aria-current attribute.	"date" | "false" | "location" | "page" | "step" | "time" | "true" | undefined	undefined
_ariaDescription	_aria-description	Defines the value for the aria-description attribute.	string | undefined	undefined
_customClass	_custom-class	Defines the custom class attribute if _variant="custom" is set.	string | undefined	undefined
_disabled	_disabled	Makes the element not focusable and ignore all events.	boolean | undefined	false
_download	_download	Tells the browser that the link contains a file. Optionally sets the filename.	string | undefined	undefined
_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
_href (required)	_href	Defines the target URI of the link.	string	undefined
_icons	_icons	Defines the icon classnames (e.g. _icons="fa-solid fa-user").	KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined	undefined
_label	_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	undefined
_on	--	Defines the callback functions for links.	undefined | { onClick?: EventValueOrEventCallback<Event, string> | 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
_target	_target	Defines where to open the link.	string | undefined	undefined
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'right'
_variant	_variant	Defines which variant should be used for presentation.	"custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" | undefined	'normal'

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>

Slots

Slot	Description
"expert"	Custom label content, e.g. for rich text or icons.

---