Skip to main content

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 the elements access key.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
_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
_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 caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it.boolean | undefinedfalse
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").KoliBriHorizontalIcons & KoliBriVerticalIcons | string | 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.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

Methods

getValue

getValue() => Promise<Stringified<StencilUnknown> | undefined>

Returns

Type: Promise<Stringified<StencilUnknown>>


Live-Editor

Beispiele