Chips

We often have needs for actions that are not "primary" or that it does not fit to use Buttons. Chips are small interactive components that manipulate data or display of data.

Read more about this component in the Aksel documentation.

Properties

Chips

Property	Description	Default	Control
Properties
size	`"medium"` `"small"`	`"medium"`
Snippets
children	List of chips. Wrap `RemovableChip` and `ToggleChip` with `<li>`		-

Properties included from: HTMLAttributes<HTMLUListElement>

ToggleChip

Removable chip shows selected values that the user can remove.

Property	Description	Default	Control
Properties
as	`"button"` `"a"`	`"button"`
checkmark	Toggles display of checkmark on selected `boolean`	`true`
selected bindable	Toggles aria-pressed and visual-changes `boolean`	`false`
value	The content of the chip `string`	-
variant	Chip-variants `"action"` `"neutral"`	`"action"`
Snippets
children	Custom content, will use `value` if not provided		-

Properties included from: Omit<HTMLButtonAttributes, "value">, HTMLAnchorAttributes

RemovableChip

Toggle chip is used for filtering content and data.

Property	Description	Default	Control
Properties
value required	The content of the chip `string`	-
removeLabel	Replaces label read for screen-readers `string`	`"remove"`
variant	Chip-variants `"action"` `"neutral"`	`"action"`
Snippets
children	Custom content, will use `value` if not provided		-
Events
ondelete	Called when the user clicks the remove button		-

Properties included from: HTMLButtonAttributes