Chip

Chips are great for allowing the user to make selections, filter content, or trigger actions.

Basic

Basic

My Friend

My Friend

Unasssign

Assign

Basic

My Friend

My Friend

Unasssign

AssignAssign or Delete

Very Very Very Very Very Very Very Very Long Text

Clamped text Very Very Very Very Very Very Long Text

Smaller Chip

Smaller Chip

Largest Chip

<SpacedGroup direction="vertical">
    <SpacedGroup>
      <Chip>Basic
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
            shouldSimulateSlowLoad={true}
          />
        }
        onDismiss={() => console.log('remove')}
      >
        Unasssign
      </Chip>
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onClick={() => console.log('assign')}
      >
        Assign
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip outlined>Basic</Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
            shouldSimulateSlowLoad={true}
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
      >
        Unasssign
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onClick={() => console.log('assign')}
      >
        Assign
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Assign or Delete
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Very Very Very Very Very Very Very Very Long Text
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip
        clamped
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Clamped text Very Very Very Very Very Very Long Text
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip size={28} outlined>
        Smaller Chip
      </Chip>
      <Chip
        size={28}
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Smaller Chip
      </Chip>
      <Chip
        size={42}
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Largest Chip
      </Chip>
    </SpacedGroup>
  </SpacedGroup>
</Playground>

API

<SpacedGroup direction="vertical">
    <SpacedGroup>
      <Chip>Basic
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
            shouldSimulateSlowLoad={true}
          />
        }
        onDismiss={() => console.log('remove')}
      >
        Unasssign
      </Chip>
      <Chip
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onClick={() => console.log('assign')}
      >
        Assign
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip outlined>Basic</Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
            shouldSimulateSlowLoad={true}
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
      >
        My Friend
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
      >
        Unasssign
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onClick={() => console.log('assign')}
      >
        Assign
      </Chip>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Assign or Delete
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Very Very Very Very Very Very Very Very Long Text
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip
        clamped
        outlined
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Clamped text Very Very Very Very Very Very Long Text
      </Chip>
    </SpacedGroup>
    <SpacedGroup>
      <Chip size={28} outlined>
        Smaller Chip
      </Chip>
      <Chip
        size={28}
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Smaller Chip
      </Chip>
      <Chip
        size={42}
        avatar={
          <Avatar
            src={
              'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
            }
          />
        }
        onDismiss={() => console.log('remove')}
        onClick={() => console.log('assign')}
      >
        Largest Chip
      </Chip>
    </SpacedGroup>
  </SpacedGroup>
</Playground>

API