FMX Prototype Pipeline

Chip

Compact interactive token. Leading icon or avatar; optional remove button.

Conference Room A

<Chip>Conference Room A</Chip>

Active

<Chip icon={faFilter}>Active</Chip>

AGAshley Green

<Chip avatarInitials="AG">Ashley Green</Chip>

Conference Room A

<Chip removable onRemove={() => setValue(null)}>
  Conference Room A
</Chip>

Active

<Chip
  icon={faFilter}
  removable
  onRemove={() => setValue(null)}
>
  Active
</Chip>

Disabled chip

<Chip disabled>Disabled chip</Chip>

Props

icon:IconDefinition

Leading icon. Mutually exclusive with avatarSrc/avatarInitials.

avatarInitials:string

Leading avatar initials.

removable:boolean= false

Show trailing remove (×) button.

onRemove:() => void

Called when the remove button is clicked.

disabled:boolean= false

Disabled state — reduced opacity.

Tokens