Settings

Mode

Direction

Contrast

Layout

Stretch

Presets

Chip

Filled

Default Deletable
Default Clickable
Primary Deletable
Primary Clickable
Secondary Deletable
Secondary Clickable
Success Deletable
Success Clickable
Warning Deletable
Warning Clickable
Error Deletable
Error Clickable 

<div class="flex flex-col items-start gap-4">
  <div class="chip default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
  <div class="chip primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Primary Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Primary Clickable</span>
  </div>
  <!-- secondary chip -->
  <div class="chip secondary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Secondary Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip secondary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Secondary Clickable</span>
  </div>
  <!-- success chip -->
  <div class="chip success">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Success Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip success">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Success Clickable</span>
  </div>
  <!-- warning chip -->
  <div class="chip warning">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Warning Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip warning">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Warning Clickable</span>
  </div>
  <!-- error chip -->
  <div class="chip error">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Error Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip error">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Error Clickable</span>
  </div>
</div>

Outlined

Default Deletable
Default Clickable
Primary Deletable
Primary Clickable
Secondary Deletable
Secondary Clickable
Success Deletable
Success Clickable
Warning Deletable
Warning Clickable
Error Deletable
Error Clickable 

<div class="flex flex-col items-start gap-4">
  <div class="chip outlined-default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip outlined-default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
  <div class="chip outlined-primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Primary Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip outlined-primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Primary Clickable</span>
  </div>
  <!-- secondary chip -->
  <div class="chip outlined-secondary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Secondary Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip outlined-secondary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Secondary Clickable</span>
  </div>
  <!-- success chip -->
  <div class="chip outlined-success">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Success Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip outlined-success">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Success Clickable</span>
  </div>
  <!-- warning chip -->
  <div class="chip outlined-warning">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Warning Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip outlined-warning">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Warning Clickable</span>
  </div>
  <!-- error chip -->
  <div class="chip outlined-error">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Error Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip outlined-error">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Error Clickable</span>
  </div>
</div>

Soft

Default Deletable
Default Clickable
Primary Deletable
Primary Clickable
Secondary Deletable
Secondary Clickable
Success Deletable
Success Clickable
Warning Deletable
Warning Clickable
Error Deletable
Error Clickable 

<div class="flex flex-col items-start gap-4">
  <div class="chip soft-default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip soft-default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
  <div class="chip soft-primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Primary Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip soft-primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Primary Clickable</span>
  </div>
  <!-- secondary chip -->
  <div class="chip soft-secondary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Secondary Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip soft-secondary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Secondary Clickable</span>
  </div>
  <!-- success chip -->
  <div class="chip soft-success">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Success Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip soft-success">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Success Clickable</span>
  </div>
  <!-- warning chip -->
  <div class="chip soft-warning">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Warning Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip soft-warning">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Warning Clickable</span>
  </div>
  <!-- error chip -->
  <div class="chip soft-error">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Error Deletable</span>
    <span class="icon cursor-pointer">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip soft-error">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Error Clickable</span>
  </div>
</div>

Disabled

Default Deletable
Default Clickable 

<div class="flex flex-col items-start gap-4">
  <div class="chip disabled">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon">
      <i class="las la-times"></i>
    </span>
  </div>
  <div class="chip disabled">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
</div>

Custom Icon

Default Deletable
Default Clickable 

<div class="flex flex-col items-start gap-4">
  <div class="chip default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon">
      <i class="las la-check text-xs"></i>
    </span>
  </div>
  <div class="chip default">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
</div>

Sizes

Default Deletable
Default Clickable
Default Deletable
Default Clickable
Default Deletable
Default Clickable 

<div class="flex flex-col items-start gap-4">
  <div class="chip primary large">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon">
      <i class="las la-check text-xs"></i>
    </span>
  </div>
  <div class="chip large primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
  <div class="chip primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon">
      <i class="las la-check text-xs"></i>
    </span>
  </div>
  <div class="chip primary">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
  <div class="chip primary small">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Deletable</span>
    <span class="icon">
      <i class="las la-check text-xs"></i>
    </span>
  </div>
  <div class="chip primary small">
    <span class="icon">
      <i class="las la-layer-group"></i>
    </span>
    <span>Default Clickable</span>
  </div>
</div>