Tailwind CSS Chip with Angular

Get started on your web projects with our Tailwind CSS Chip which is a compact elements that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions

See below our simple Chip component example that you can use for your Tailwind CSS and Angular project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

You first need to import the DUIChip Module into your application module 

    
 import { DUIChip } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUIChip],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
Chip
    
 
  <dui-chip>Chip</dui-chip>

Chip Variants

The Chip component comes with 4 different variants that you can change it using the variant prop.

Chip Filled
Chip Outlined
Chip Gradient
Chip Ghost
    
 
  <dui-chip variant="filled" >Chip Filled</dui-chip>
  <dui-chip variant="outlined" >Chip Outlined</dui-chip>
  <dui-chip variant="gradient" >Chip Gradient</dui-chip>
  <dui-chip variant="ghost" >Chip Ghost</dui-chip>

Chip Sizes

The Chip component comes with 3 different sizes that you can change it using the size prop.

Chip Filled
Chip Filled
Chip Filled
    
 
  <dui-chip size="sm" >Chip Filled</dui-chip>
  <dui-chip size="md" >Chip Filled</dui-chip>
  <dui-chip size="lg" >Chip Filled</dui-chip>

Chip Colors

You can use different colors of the chip component by manipulating the color attribute of the component

Chip
Chip
Chip
Chip
Chip
    
 
  <dui-chip color="red">Chip</dui-chip>
  <dui-chip color="yellow">Chip</dui-chip>
  <dui-chip color="green">Chip</dui-chip>
  <dui-chip color="pink">Chip</dui-chip>
  <dui-chip color="purple">Chip</dui-chip>

Chip Pills

You can pass tailwind css classes for the Chip component using the className prop this helps to do any sort of customization for the chip.

Chip Filled
Chip Outlined
Chip Gradient
Chip Ghost
    
 
  <dui-chip variant="filled" className="rounded-full">Chip Filled</dui-chip>
  <dui-chip variant="outlined" className="rounded-full" >Chip Outlined</dui-chip>
  <dui-chip variant="gradient" className="rounded-full" >Chip Gradient</dui-chip>
  <dui-chip variant="ghost" className="rounded-full" >Chip Ghost</dui-chip>

Chip Icon

You can use different colors of the chip component by manipulating the color attribute of the component

Account
Account
Account
Account 
    
 
    <dui-chip color="gray" variant="filled" [hasIcon]="true" >
      <dui-icon>
        <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="h-5 w-5"
      >
          <path
            fillRule="evenodd"
            d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
            clipRule="evenodd"
          />
        </svg>
        </dui-icon>
          Account
    </dui-chip>
    <dui-chip color="gray" variant="gradient" [hasIcon]="true"  >
        <dui-icon>
          <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-5 w-5"
        >
          <path
            fillRule="evenodd"
            d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
            clipRule="evenodd"
          />
        </svg>
        </dui-icon>
        Account
    </dui-chip>
    <dui-chip color="gray" variant="outlined" [hasIcon]="true"  >
        <dui-icon>
          <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-5 w-5"
        >
          <path
            fillRule="evenodd"
            d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
            clipRule="evenodd"
          />
        </svg>
        </dui-icon>
        Account
    </dui-chip>
    <dui-chip color="gray" variant="ghost" [hasIcon]="true"  >
        <dui-icon>
          <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-5 w-5"
        >
          <path
            fillRule="evenodd"
            d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
            clipRule="evenodd"
          />
        </svg>
        </dui-icon>
        Account
    </dui-chip>

Chip Properties

The following properties are available for dui-chip component. These are the custom properties that we've added for the chip component and you can use all the other native properties as well.

AttributeType Description Default
variantVariantchange chip variantfilled
colorColorchange chip colorgray
classNamestringAdd custom className for chip''
sizebooleanChange chip sizemd
isDismissiblebooleanDismissible flag for chipfalse
hasIconbooleanIcon flag for chipfalse
<dui-icon>contentAdd Icon content inside dui-icon tag to use icon in chipfalse

Type - Variant 

    
 
  type variant = "filled" | "gradient" | "outlined" | "ghost"

Type - Size 

    
 
  type size = 'sm' | 'md' | 'lg';

Type - Color 

    
 type colors =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";