@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
37 lines (18 loc) • 6.55 kB
Markdown
# kol-badge
<!-- Auto Generated Below -->
## Overview
The **Badge** component allows you to visually highlight specific information.
In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
## Properties
| Property | Attribute | Description | Type | Default |
| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
| `_color` | `_color` | Defines the backgroundColor and foregroundColor. | `string \| undefined \| { backgroundColor: string; foregroundColor: string; }` | `'#000'` |
| `_icons` | `_icons` | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`). | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined` | `undefined` |
| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
| `_smartButton` | `_smart-button` | Allows to add a button with an arbitrary action within the element (_hide-label only). | `string \| undefined \| { _label: string; } & { _type?: "button" \| "reset" \| "submit" \| undefined; _accessKey?: string \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _ariaExpanded?: boolean \| undefined; _tabIndex?: number \| undefined; _value?: StencilUnknown; _role?: "tab" \| "treeitem" \| undefined; _ariaControls?: string \| undefined; _ariaDescription?: string \| undefined; _ariaSelected?: boolean \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _inline?: boolean \| undefined; _name?: string \| undefined; _shortKey?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _variant?: string \| undefined; }` | `undefined` |
## Methods
### `focus() => Promise<void>`
Sets focus on the internal element.
#### Returns
Type: `Promise<void>`
----------------------------------------------