# 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(options?: KolFocusOptions) => Promise<void>`

Sets focus on the internal element.

#### Parameters

| Name      | Type                           | Description |
| --------- | ------------------------------ | ----------- |
| `options` | `KolFocusOptions \| undefined` |             |

#### Returns

Type: `Promise<void>`




----------------------------------------------


