4.32.2

Chip

For displaying dismissable bits of information

Demo

API

Tag

Name	Description
`<s-chip>`	Custom HTML tag, accepts content

Attributes

Name	Value	Required	Description
`disabled`	Boolean		If present, the chip will be disabled.
`readonly`	Boolean		If present, the chip will be readonly.
`visuallyfocused`	Boolean		If present, the chip will be visually focused.
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Required	Description
`disabled`	Boolean		If present, the chip will be disabled.
`readonly`	Boolean		If present, the chip will be readonly.
`visuallyFocused`	Boolean		If present, the chip will be visually focused.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Events

Name	Detail	Description
`s-dismiss`	The dismissed chip's `id` is available on `e.detail`	Fired when the chip is dismissed.

Demo

API

Tag

Name
`<SChip>`

Props

Name	Value	Required	Description
`disabled`	Boolean		If present, the chip will be disabled.
`readonly`	Boolean		If present, the chip will be readonly.
`visuallyFocused`	Boolean		If present, the chip will be visually focused.
`onS-dismiss`	Function		Handles the `s-dismiss` event fired when the chip is dismissed. The dismissed chip's `id` is available on `e.detail`.
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Skylab React links

General information about using our React package

i18n Strings

ID	Description	Default value
`"chip.ariaLabel.dismiss"`	The aria-label on the dismiss button.	Dismiss

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com