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
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
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the elements access key. | 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 | Defines the role of the components primary element. | "button" | "link" | "tab" | "treeitem" | undefined | undefined |
_shortKey | _short-key | Adds a visual short key hint to the component. | string | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | 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
focus
focus() => Promise<void>
[DEPRECATED] Use kolFocus instead.
Returns
Type: Promise<void>
kolFocus() => Promise<void>
Returns
Type: Promise<void>