- Getting Started
- Installation: Tailwind CLI
Chip
Chips are compact elements that represent an input, attribute, or action. Chips allow users to enter information, make selections, filter content, or trigger actions.
While included here as a standalone component, the most common use will be in some form of input, so some of the behavior demonstrated here is not shown in context.
Examples
Below you can view various implementations and example markup.
Variant
The chip component supports outlined and filled styling.
<.chip label="filled" />
<.chip
label="outlined"
variant="outlined"
/>
Clickable
Chips with the on_click prop defined change appearance on focus, hover, and click.
<.chip
label="clickable"
on_click="handle_click"
/>
<.chip
label="clickable"
on_click="handle_click"
variant="outlined"
/>
Deletable
Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.
<.chip
label="deletable"
on_delete="delete"
/>
<.chip
label="deletable"
on_delete="delete"
variant="outlined"
/>
Clickable & Deletable
Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.
<.chip
label="clickable deletable"
on_click="click"
on_delete="delete"
/>
<.chip
label="clickable deletable"
on_click="click"
on_delete="delete"
variant="outlined"
/>
Clickable Link
Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.
<.chip
element="a"
href="#"
label="clickable link"
/>
<.chip
element="a"
href="#"
label="clickable link"
variant="outlined"
/>
Custom Delete Icon
Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.
<.chip
delete_icon={[name: "check"]}
label="custom delete icon"
on_delete="delete"
/>
<.chip
delete_icon={[name: "trash"]}
label="custom delete icon"
on_delete="delete"
variant="outlined"
/>
Avatar
Use the avatar prop to add an avatar.
<.chip
avatar={[alt: "Inara Mosley"]}
label="avatar"
/>
<.chip
avatar={[alt: "Inara Mosley", src: @src1]}
label="avatar"
variant="outlined"
/>
Icon
Use the icon attribute to add an icon.
<.chip
icon={[name: "check-circle", variant: "outline"]}
label="icon"
/>
<.chip
icon={[name: "check-circle", variant: "outline"]}
label="icon"
variant="outlined"
/>
Color
You can use the color attribute to define a color from theme palette.
<div class="mb-4">
<.chip
color="red"
label="red"
/>
<.chip
color="orange"
label="orange"
/>
<.chip
color="yellow"
label="yellow"
/>
<.chip
color="green"
label="green"
/>
<.chip
color="blue"
label="blue"
/>
<.chip
color="purple"
label="purple"
/>
</div>
<div>
<.chip
color="red"
label="red"
variant="outlined"
/>
<.chip
color="orange"
label="orange"
variant="outlined"
/>
<.chip
color="yellow"
label="yellow"
variant="outlined"
/>
<.chip
color="green"
label="green"
variant="outlined"
/>
<.chip
color="blue"
label="blue"
variant="outlined"
/>
<.chip
color="purple"
label="purple"
variant="outlined"
/>
</div>
Size
You can use the size prop to define a small Chip.
<.chip
label="small"
size="sm"
/>
<.chip
label="small"
size="sm"
variant="outlined"
/>
API
API documentation for the component. Learn about imports and available attributes.
Import
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Alert
Attributes
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| color | any tailwind color | slate | Any Tailwind-supported color. |
| extend_class | string | Adds additional classes. | |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| size | "sm" | "md" | md | |
| variant | "filled" | "outlined" | filled |