Checkable Tag

Used for marking and categorisation. It works like Checkbox, click it to toggle checked state.

CheckableTag

Usage

Example Code

1import { CheckableTag } from "inc-design-system/tag";

Example Code

1<CheckableTag>CheckableTag</CheckableTag>

Prop	Type	Description	Default
className	string	Additional CSS classes to apply to the tag container.	-
variant	"default" \| "primary" \| "secondary" \| "transparentBackground"	The variant of the tag. Can be one of 'default', 'primary', 'secondary', or 'transparentBackground'.	"default"
checked	boolean	Whether the Tag is checked by default.	false
checkedBackgroundColor	string	Background color when Tag is checked.	"#DDD2F0"
checkedTextColor	string	Text color when Tag is checked.	"#482384"
onClickTag	() => void	Callback when the Tag is clicked.	-
closeable	boolean	Whether the Tag can be closed. Default is false. If true, a close button will be displayed.	false
onClose	() => void	Callback when the Tag is closed.	-
icon	ReactNode	Icon to display alongside the Tag text. Default is null.	null
disabled	boolean	Whether the Tag is disabled. Default is false.	false
border	boolean	Whether the Tag has a border. Default is true.	true