Chip

Cheap Chip.

Example

Some chip
Some chip

Props

    🕹ī¸ standard props
    close
    boolean
    If true, shows a close icon to remove the chip
    false
    closeIcon
    string
    Icon name for the close button
    mdi-close-circle
    disabled
    boolean
    If true, disables the chip
    false
    prependIcon
    string
    Icon name for the prepend icon
    inactive
    boolean
    If true, applies an inactive style to the chip
    false
    buttonTabIndex
    number | null
    Tab index for the chip button
    null
    truncateText
    boolean
    If true, truncates the text with ellipsis
    false
    🎨 style props
    --chip-min-height
    size
    Minimum height of the chip
    1.8rem
    --chip-height
    size
    Height of the chip
    --chip-padding
    size
    Padding of the chip
    0px 7px
    --chip-cursor
    cursor
    Cursor style
    pointer
    --chip-gap
    size
    Gap between chip elements
    5px
    --chip-text-max-width
    size
    Max width for text before truncation
    200px
    --chip-background-color
    color
    Background color of the chip
    rgb(var(--global-color-primary-500))
    --chip-color
    color
    Default color of the chip
    rgb(var(--global-color-grey-50))
    --chip-hover-background-color
    color
    Background color on hover
    rgb(var(--global-color-primary-600))
    --chip-focus-background-color
    color
    Background color on focus
    rgb(var(--global-color-primary-600))
    --chip-inactive-focus-color
    color
    Focus color for inactive chip
    rgb(var(--global-color-primary-400))
    --chip-inactive-focus-border-color
    color
    Focus border color for inactive chip
    --chip-inactive-focus-box-shadow
    box-shadow
    Box shadow for focused inactive chip
    0px 0px 4px 2px rgba(var(--global-color-primary-400),0.1)
    --chip-border-radius
    size
    Border radius of the chip
    6px
    --chip-font-size
    size
    Font size of the chip
    inherit
    --chip-line-height
    size
    Line height of the chip
    inherit
    --chip-font-weight
    weight
    Fonth weight of the chip
    500
    --chip-inactive-color
    color
    Color for inactive chip
    --chip-inactive-background-color
    color
    Background color for inactive chip
    rgb(var(--global-color-background-300))
    --chip-inactive-border
    border
    Border for inactive chip
    --chip-inactive-border-color
    color
    Border color for inactive chip

Slots

    children
    Content of the chip, displayed inside the chip

Events

    onclick
    Triggered when the chip is clicked
    AttributeTypeDescription
    nativeMouseEventThe native mouse event
    onclose
    Triggered when the close icon is clicked
    AttributeTypeDescription
    nativeMouseEventThe native mouse event