Chip

Usage

To display a chip, pass a label, onClick, and onRemove to <Chip>.

Ivan Salim

import { Chip } from "stylus-ui/Chip";

const handleClick = () => alert("Chip clicked!");
const handleRemove = () => alert("Remove clicked!");

export default () => (
  <Chip label="Ivan Salim" onClick={handleClick} onRemove={handleRemove} />
);

Avatars

To display an avatar with the chip, set showAvatar to true. You can customize the avatar color by setting color.

N

Nam-Chi Van

import { Chip } from "stylus-ui/Chip";

const handleClick = () => alert("Chip clicked!");
const handleRemove = () => alert("Removed!");

export default () => (
  <Chip
    label="Nam-Chi Van"
    onClick={handleClick}
    onRemove={handleRemove}
    showAvatar
    color="cyan"
  />
);

API Reference

Chip

Inherits properties from HTMLElement.

Prop	Type	Default
label	string
color	"orange""yellow""lime""emerald""cyan""blue""violet""fuchsia""rose""gray"	"violet"
onClick	MouseEventHandler<HTMLDivElement>
onRemove	MouseEventHandler<HTMLButtonElement>
showAvatar	boolean	false