Primer / Live
Storybook

  • Theme

  • Light
  • Dark
  • System

  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia

  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia
  • Reset to default

Action List

Single select from data

Interactive
A single select uses a radio input group under the hood. In this example, deselection is done with a "reset" event handler that compares the associated job id with the current user data, and if equal, resets the user and changeset.
Selected: -

Multiple select from data

Interactive
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