Chips can be used to represent small blocks of information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements.


  text: "Label",
  defaultBackgroundColor: _isDark ? Colors.transparent : Colors.white,
  selectedBackgroundColor: _isDark ? XelaColor.Blue5 : XelaColor.Blue3,
  defaultContentColor: _isDark ? XelaColor.Blue5 : XelaColor.Blue3,
  selectedContentColor: _isDark ? Colors.white : Colors.white,
  defaultBorderColor: _isDark ? XelaColor.Blue5 : XelaColor.Blue3,
  selectedBorderColor: Colors.transparent


Name Type Default Value Required Description
text String - YES Text string for chip
size XelaChipSize XelaChipSize.LARGE NO Size for chip (LARGE, MEDIUM, SMALL)
leftIconActive Widget? null NO Left Icon Active Widget
leftIconInactive Widget? null NO Left Icon InActive Widget
rightButtonActive Widget? null NO Right Icon Active Widget
rightButtonInactive Widget? null NO Right Icon InActive Widget
disabled bool false NO Disable for chip
selected bool false NO Selected status for chip
borderWidth double 2 NO Chip border width
defaultBorderColor Color XelaColor.Blue3 NO Default border color
selectedBorderColor Color XelaColor.Blue3 NO Selected border color
defaultBackgroundColor Color Colors.white NO Default background color
selectedBackgroundColor Color XelaColor.Blue3 NO Selected background color
defaultContentColor Color XelaColor.Blue3 NO Default text string color
selectedContentColor Color Colors.white NO Selected text string color,
onChange Function(bool)? null NO On change selection chip action