LightningWeb.Components.Pills (Lightning v2.15.0-pre3)

View Source

UI component to render a pill to create tags.

Summary

Functions

Renders a filter badge with a close button.

Renders a pill with a color.

Functions

filter_badge(assigns)

Renders a filter badge with a close button.

Example

<.filter_badge
  form={@filters_changeset}
  fields={[{:workflow_id, nil}]}
  id="workflow_badge_123"
>
  Workflow: My Workflow
</.filter_badge>

<.filter_badge
  form={@filters_changeset}
  fields={[{:wo_date_after, nil}, {:wo_date_before, nil}]}
  id="workorder_date_badge"
>
  Date range: * - *
</.filter_badge>

Attributes

  • form (:any) (required) - The form changeset.
  • fields (:list) (required) - List of {field_name, field_value} tuples representing the fields to reset.
  • id (:string) (required) - Unique ID for the badge.

Slots

  • inner_block (required)

pill(assigns)

Renders a pill with a color.

Example

<.pill color="red">
  Red pill
</.pill>

## Colors

- `gray` **default**
- `red`
- `yellow`
- `green`
- `blue`
- `indigo`
- `purple`
- `pink`

## Attributes

* `color` (`:string`) - Defaults to `"gray"`. Must be one of `"gray"`, `"red"`, `"yellow"`, `"green"`, `"blue"`, `"indigo"`, `"purple"`, or `"pink"`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)