Zum Hauptinhalt springen

ButtonLink

Der ButtonLink ist semantisch ein Button und hat das Design eines Links. Hierzu werden alle relevanten Properties der Button-Komponente übernommen und um die Design-bestimmenden Properties des Links erweitert.

Einen Button kann man deaktivieren und daher gibt es bei einem ButtonLink das Property _disabled. Wie das optisch ausgestaltet wird, entscheidet die UX-Designer:in.

Statt, wie bei einem Link, _href zu verwenden, wird bei einem ButtonLink das Property über den Click-Callback gesteuert. Hierzu wird das _on-Property verwendet.

Bei einem Link gibt es das Property target, welches ggf. den Link in einem neuen Fenster/Tab öffnet. Das Verhalten ist aktuell noch nicht umgesetzt.

Da der Link, nicht wie der Button, in mehrere Varianten (primary oder secondary usw.) angeboten wird, stehen die Properties _customClass und _variant nicht zur Verfügung.

Konstruktion

Code

<kol-button-link _on="" _label="Schalter sieht wie ein Link aus"></kol-button-link>

Beispiel

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_ariaControls_aria-controlsDefines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string | undefinedundefined
_ariaCurrent_aria-current[DEPRECATED] aria-current is not necessary for buttons. will be removed in version 2.

Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: date`` | ``location`` | ``page`` | ``step`` | ``time`` | ``true. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
"date" | "location" | "page" | "step" | "time" | boolean | undefinedundefined
_ariaExpanded_aria-expandedDefines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean | undefinedundefined
_ariaLabel_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.
string | undefinedundefined
_ariaSelected_aria-selectedDefines 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 | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_hideLabel_hide-labelHides the label and shows the description in a Tooltip instead.boolean | undefinedfalse
_icon_iconDefines the icon classnames (e.g. _icon="fa-solid fa-user").KoliBriHorizontalIcon & KoliBriVerticalIcon | string | undefinedundefined
_iconOnly_icon-only[DEPRECATED] use _hide-label

Deprecated: Hides the label and shows the description in a Tooltip instead.
boolean | undefinedundefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines 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.boolean | stringundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Gibt die EventCallback-Funktionen für die Button-Events an.undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; }undefined
_role_roleDefines the role of the components primary element."button" | "link" | "tab" | undefinedundefined
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_type_typeDefines either the type of the component or of the components interactive element."button" | "reset" | "submit" | undefined'button'
_value_valueDefines the value that the button emits on click.boolean | null | number | object | string | undefinedundefined

Dependencies

Depends on

  • kol-button-wc

Graph


Live-Editor

Beispiele