Chip

Renders a chip.

Read more Read less

Chips are sometimes also called “pills” or “labels.” They can be “removeable” which will render an ‘x’ letting you attach an “on-remove” phx-click event. They may also contain icons.

Example:

<.chip size="lg">
  Some label
</.chip>

To use an icon, pass its name to the icon attribute:

<.chip icon="magnifying-glass">
...
</.chip>
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Restaurants
Attribute Type Documentation Default Value
Required id * :string
type :string

The context-specific color of the chip.

Read more Read less
"neutral"

important is rendered in the brand color.

solid :boolean

Renders without an outline with a filled in color

false
size :string "md"
icon :string

Renders an icon to the left of the inner block.

tooltip :string

Tooltip text rendered on hover

removeable :boolean false
remove_button_aria_label :string

Accessible label for the remove button. Should include the action, e.g. ‘Remove Restaurants’.

rest :global
on_remove %JS{}
Required inner_block * :slot

The text/label

Restaurants