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
_accessKey_access-keyDefines the elements access key.string | undefinedundefined
_ariaCurrentValue_aria-current-valueDefines the value for the aria-current attribute."date" | "false" | "location" | "page" | "step" | "time" | "true" | undefinedundefined
_customClass_custom-classDefines the custom class attribute if _variant="custom" is set.string | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_download_downloadTells the browser that the link contains a file. Optionally sets the filename.string | undefinedundefined
_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
_href (required)_hrefDefines the target URI of the link.stringundefined
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").KoliBriHorizontalIcons & KoliBriVerticalIcons | 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
_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
_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