Chip

Control that can be used for input, setting attributes, or performing actions.

Module

import '@capitec/omni-components/chip';

content_copy

import { OmniChip } from "@capitec/omni-components-react/chip";

content_copy

Source

Packages

Examples

Docs

Styles

Interactive

Label

Closable

Disabled

Chip Slot Icon

Custom Close Icon

Properties

Name	Attribute	Type	Description
label	label	`string \| undefined`	Text label.
closable	closable	`boolean \| undefined`	Sets if the chip has a close button.
disabled	disabled	`boolean \| undefined`	Indicator if the component is disabled.
dir	dir	`string`	Used to set the base direction of text for display
lang	lang	`string`	Used to identify the language of text content on the web

Events

Name	Type	Description
remove	`CustomEvent<{}>`	Dispatched when the close icon is clicked.

Name	Description
`loading_indicator`	Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called
`chip_icon`	Replaces the icon for the chip slot
`close_icon`	Replaces the icon for the closed slot

Name	Description
`--omni-theme-primary-color`	Theme primary color.
`--omni-theme-primary-hover-color`	Theme primary hover color.
`--omni-theme-primary-active-color`	Theme primary active color.
`--omni-theme-accent-color`	Theme accent color.
`--omni-theme-accent-hover-color`	Theme accent hover color.
`--omni-theme-accent-active-color`	Theme accent active color.
`--omni-theme-background-color`	Theme background color.
`--omni-theme-background-hover-color`	Theme background hover color.
`--omni-theme-background-active-color`	Theme background active color.
`--omni-theme-font-color`	Theme font color.
`--omni-theme-disabled-border-color`	Theme disabled border color.
`--omni-theme-disabled-background-color`	Theme disabled background color.
`--omni-theme-error-font-color`	Theme disabled background color.
`--omni-theme-error-border-color`	Theme error border color.
`--omni-theme-hint-font-color`	Theme hint font color.
`--omni-theme-inactive-color`	Theme inactive color.
`--omni-theme-box-shadow-color`	Theme inactive color.
`--omni-theme-font-family`	Theme font family.
`--omni-theme-font-size`	Theme font size.
`--omni-theme-font-weight`	Theme font weight.
`--omni-theme-border-radius`	Theme border radius.
`--omni-theme-border-width`	Theme border width.
`--omni-theme-box-shadow`	Theme box shadow.

Name	Description
`--omni-chip-height`	Component height.
`--omni-chip-max-height`	Component maximum height.
`--omni-chip-border`	Component border.
`--omni-chip-border-radius`	Component border radius.
`--omni-chip-background-color`	Component background color.
`--omni-chip-padding`	Component padding.
`--omni-chip-hover-border`	Component hover border.
`--omni-chip-hover-shadow`	Component hover shadow.
`--omni-chip-label-padding-left`	Component label left padding.
`--omni-chip-label-padding-right`	Component label right padding.
`--omni-chip-label-color`	Component label color.
`--omni-chip-label-font-family`	Component label font family.
`--omni-chip-label-font-size`	Component label font size.
`--omni-chip-label-font-weight`	Component label font weight.
`--omni-chip-label-line-height`	Component label line height.
`--omni-chip-icon-width`	Component slotted icon width.
`--omni-chip-close-icon-width`	Component close icon width.
`--omni-chip-close-icon-color`	Component close icon color.
`--omni-chip-disabled-border-color`	Component disabled border color.
`--omni-chip-disabled-background-color`	Component disabled background color.
`--omni-chip-disabled-hover-background-color`	Component icon left padding.