Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Action List

Action list is a vertical list of interactive actions or options. It's composed of items presented in a consistent. single-column format, with room for icons, descriptions, side information, and other rich visuals.

Form: single select

Interactive
Selected: -

Form: multiple select

Interactive
Selected: -

Form: selecting items with phx-*

Interactive
An example of selecting items using phx-click and phx-value-item.
Selected: -

Basic action list

  • Item
  • Item
  • Item

With separators

  • Item
  • Item
  • Item

Common attributes

  • Descructive item
  • Disabled item
  • A very long text abbreviated by ellipsis

Heights

  • Regular
  • Medium
  • Large

Links

Leading visual

  • Item
  • Item
  • Item

Trailing visual

  • Item
    12

Leading and trailing visual

  • Item
    12

Selected states

Description

  • Item
    Description
  • Item
    Description

Description inline

  • Item
    Description
  • Item
    Description

Section divider

  • Item
  • Item

Section divider, filled

  • Item
  • Item

Section divider with title

  • Item

  • Title

  • Item

Section divider with title, filled

  • Item

  • Title

  • Item

Section divider with title and description

  • Item

  • Title

    A descriptive text
  • Item

Single select

  • Option
  • Option
  • Option

Single select with custom leading visual

  • Option
  • Option
  • Option

Single select with selected link marker

  • Option
  • Option
  • Option

Multiple select

  • Option
  • Option
  • Option

Multiple select with custom leading visual

Uses leading_visual slot.
  • Option
  • Option
  • Option

Multiple select with checkmark icons

Uses attribute is_checkmark_icon.
  • Option
  • Option
  • Option

Multiple select with link marker

Uses attribute is_selected_link_marker.
  • Option
  • Option
  • Option

Sub group

  • Section title

    • Sub item
    • Sub item

  • Section title

    • Sub item
    • Sub item

  • Section title

    • Sub item
    • Sub item