---
title: Chip
desc: Small, interactive element that represents an input, attribute, or action.
ico: mdi:tag
keywords:
  - tag

props:
  - class: .prs-chip
    type: component
    desc: Container
  - class: .prs-chip-label
    type: part
    desc: Container
  - class: .prs-chip_active
    type: state
    desc: Active/Selected
  - class: .prs-chip_hover
    type: state
    desc: Manually apply visual hover
  - class: .prs-chip_focus
    type: state
    desc: Manually apply visual focus
  - class: .prs-chip_disabled
    type: state
    desc: Manually apply visual disabled

controls:
  - name: text
    type: text
    label: Text
    desc: As always, keep it simple.
    default: Text

  - name: variant
    type: radio
    label: Variant
    desc: Color variants.
    default: default
    options:
      - default
      - active
    
  - name: icon
    type: toggle
    label: With icon
    desc: With a leading icon.
    default: false

  - name: close
    type: toggle
    label: With close
    desc: With a trailing close gadget.
    default: false

  - name: state
    type: radio
    label: State
    desc: These states will happen automatically when using valid sematic markup. We do include classes to force hover and focus states but you should avoid using those classes in your application.
    default: default
    options:
      - default
      - hover
      - focus

preview: |
  <button
    class="prs-chip"
    :class="{
      'prs-chip_active': variant === 'active',
      'prs-chip_hover': state === 'hover',
      'prs-chip_focus': state === 'focus',
    }"
    :disabled="state === 'disabled'"
  >
    <span x-show="icon" x-transition class="icon"><iconify-icon icon="mdi:checkbox-marked" class="iconify text-xl" noobserver></iconify-icon></span>
    <span class="prs-chip-label" x-text="text ? text : 'Text'"></span>
    <span x-show="close" x-transition class="close"><iconify-icon icon="mdi:close" class="iconify" noobserver></iconify-icon></span>
  </button>

code:
  html: |
    <button class="prs-chip{active}{state}"{disabled}>
      {withIcon}<span class="prs-chip-label">{text}</span>{withClose}
    </button>
  logic:
    text: "this.text"
    active: "this.variant === 'active' ? ' prs-chip_active' : ''"
    state: "(this.state !== 'default' && this.state !== 'disabled') ? (' prs-chip_'+ this.state) : ''"
    withIcon: "this.icon ? '<span class=\"icon\"><iconify-icon icon=\"mdi:check\"></iconify-icon></span>\\n  ' : ''"
    withClose: "this.close ? '\\n  <span class=\"close\"><iconify-icon icon=\"mdi:close\"></iconify-icon></span>' : ''"
    disabled: "this.state === 'disabled' ? ' disabled' : ''"
---