# Chip

### Uso

{% code title="page-chip.component.html" %}

```html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <cat-chip class="mr-5" color="success">Success</cat-chip>
    <cat-chip class="mr-5" color="warning">Warning</cat-chip>
    <cat-chip class="mr-5" color="danger">Danger</cat-chip>
    <cat-chip class="mr-5" color="info">Info</cat-chip>
    <cat-chip class="mr-5" color="primary">Primary</cat-chip>
    <cat-chip class="mr-5" color="secondary">Secondary</cat-chip>
    <cat-dynamic-component [component]="chipWithDynamicComponent"></cat-dynamic-component>
  </nav>
</cat-toolbar>
```

{% endcode %}

{% hint style="info" %}
O componente de **chip** também possui integração com os [componentes dinâmicos](https://doc.catui.igordrangel.com.br/exibicao-de-dados/componentes-dinamicos), permitindo a inclusão deste componente pelo [Datatable](https://doc.catui.igordrangel.com.br/exibicao-de-dados/datatable).
{% endhint %}

{% code title="page-chip.component.ts" lineNumbers="true" %}

```typescript
import { Component } from '@angular/core';
import { CatComponentBase } from '@catrx/ui/common';
import { CatChip } from '@catrx/ui/chip';

@Component({
  templateUrl: './page-chip.component.html',
})
export class PageChipComponent extends CatComponentBase {
  chipWithDynamicComponent = new CatChip('Componente Dinâmico', 'success');
}
```

{% endcode %}

{% code title="page-chip.module.ts" lineNumbers="true" %}

```typescript
import { CatDynamicComponentModule } from '@catrx/ui/dynamic-component';
import { NgModule } from '@angular/core';
import { CatChipModule } from '@catrx/ui/chip';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageChipComponent } from './page-chip.component';
import { PageChipRoutingModule } from './page-chip.routing.module';

@NgModule({
  declarations: [PageChipComponent],
  imports: [
    CatToolbarModule,
    CatChipModule,
    CatDynamicComponentModule,
    PageChipRoutingModule,
  ],
})
export class PageChipModule {}
```

{% endcode %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/components/chip>" %}