@forter/chip

fc-chip

An element for catagorizing

Usage

<script>
   import '@forter/chip';
</script>

<fc-chip>
     Chip
</fc-chip>

Examples

<!-- iconOnly -->
<fc-chip><fc-icon icon="edit"></fc-icon></fc-chip>

<!-- Icon - Intent - Success -->
<fc-chip intent="success">Approved</fc-chip>

Properties

Property	Attribute	Type	Default	Description
closeable	closeable	boolean	false	whether the chip can be closed
closed	closed	string		wether the chip closed
disabled	disabled	boolean		If the element is disabled
intent	intent	"primary" | "cancel" | "success" | "danger" | "warn"		The button's intent. See Intents in README.
required	required	boolean	false	If the chip is required
selected	selected	boolean	false	whether the chip is select able
value	value	string		value stored for delete event

Events

Event	Description
close	fired when a chip remove clicked

CSS Custom Properties

Property	Description
--fc-chip-background	background color. example: gray,
--fc-chip-border-radius	border radius. example: 25px,
--fc-chip-close-icon-color	close icon. example: light-gray,
--fc-chip-cursor	cursor. example: pointer,
--fc-chip-font-size	font size. example: 12px,
--fc-chip-height	height. example: 30px,
--fc-chip-hover-background	hover background color. example: light-gray,
--fc-chip-hover-color	hover text color. example: black.
--fc-chip-padding-left	padding left. example: 10px,
--fc-chip-padding-right	padding right. example: 10px,
--fc-chip-width	width. example: 25px,