Zum Hauptinhalt springen

LinkButton

Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert. Weitere Informationen zum Aussehen finden Sie auf der .

Konstruktion

Code

<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="Secondary" _variant="danger"></kol-link-button>
<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>

Beispiel

Properties

PropertyAttributeDescriptionTypeDefault
_ariaControls_aria-controls[DEPRECATED] will be removed in v2

Deprecated: Defines 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] use _listen-aria-current instead

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-expanded[DEPRECATED] will be removed in v2

Deprecated: Defines 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-selected[DEPRECATED] will be removed in v2

Deprecated: 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 | undefinedundefined
_customClass_custom-classDefines the custom class attribute if _variant="custom" is set.string | undefinedundefined
_disabled_disabled[DEPRECATED] Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.

Deprecated: Makes the element not focusable and ignore all events.
boolean | undefinedfalse
_download_downloadTells the browser that the link contains a file. Optionally sets the filename.boolean | string | undefinedfalse
_hideLabel_hide-labelHides the label and shows the description in a Tooltip instead.boolean | undefinedfalse
_href (required)_hrefDefines the target URI of the link.stringundefined
_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
_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
_listenAriaCurrent_listen-aria-currentListen on a aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value."date" | "location" | "page" | "step" | "time" | boolean | undefinedundefined
_on--Defines the callback functions for links.undefined | { onClick?: EventValueOrEventCallback<Event, string> | 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
_target_targetDefines where to open the link.string | undefinedundefined
_targetDescription_target-descriptionDefines the description to use when the link is going to be opened in another application.string | undefinedtranslate('kol-open-link-in-tab')
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'right'
_variant_variantDefines which variant should be used for presentation."custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" | undefined'normal'

Dependencies

Depends on

  • kol-link-wc

Graph


Live-Editor

Beispiele