Chips

Example

import { useState } from 'react';
import Chip from '@mavvy/m3-ui/Chip';

function Example() {
  const [selected, setSelected] = useState(false);

  const handleSelect = () => {
    setSelected((v) => !v);
  }
  return (
    <div>
      <Chip onClick={handleSelect} selected={selected}>
        Hello
      </Chip>
      <Chip color="primary" onClick={handleSelect} selected={selected}>
        Hello
      </Chip>
      <Chip leadingIcon="check" onClick={handleSelect} selected={selected}>
        Hello
      </Chip>
      <Chip
        leadingIcon="check"
        color="primary"
        onClick={handleSelect}
        selected={selected}
      >
        Hello
      </Chip>
      <Chip
        trailingIcon="close"
        color="primary"
        onClick={handleSelect}
        selected={selected}
      >
        Hello
      </Chip>
    </div>
  );
}

Preview

Hello

Hello

checkHello

checkHello

Helloclose

Props

prop	type	description
color	Color	component color
leadingIcon	string	leading icon to render on the chip
leadingIconClassName	string	className to apply on the leadingIcon Icon component
trailingIcon	string	trailing icon to render on the chip
trailingIconClassName	string	className to apply on the trailingIcon Icon component
className	string	className of the chip component
textClassName	string	className of the Text component
selected	boolean	if tru, shows a selected state
onClick	(event: React.MouseEvent) => void	handler for the click event
variant	filled|outlined	variant of the Chip component
size	Size	size of the chip component