Action list (deprecated) ​

Action lists render a list of actions or selectable options. This component is usually placed inside a popover container to create a dropdown menu or let users select from a list of options.

Usage ​

<script lang="ts" setup>
import {
  ActionList,
  ActionListBody,
  ActionListItem,
  ActionListSection,
  ActionListTrigger,
  Button,
} from '@returnless/focus-ui'; 
import { TrashIcon, PencilIcon, ArrowUpTrayIcon, ArrowDownTrayIcon } from '@heroicons/vue/16/solid';
</script>

<template>
  <ActionList>
    <ActionListTrigger>
      <Button disclosure variant="ghost">Action trigger</Button>
    </ActionListTrigger>
    <ActionListBody>
    <ActionListSection label="File options">
      <ActionListItem :icon="ArrowDownTrayIcon" href="#" as="link">
        Import file
      </ActionListItem>
      <ActionListItem :icon="ArrowUpTrayIcon" active as="button">
        Export file
      </ActionListItem>
    </ActionListSection>
      <ActionListSection label="Bulk actions">
        <ActionListItem :icon="PencilIcon" as="button">
          Edit
        </ActionListItem>
        <ActionListItem :icon="TrashIcon" as="button" variant="destructive">
          Delete
        </ActionListItem>
      </ActionListSection>
    </ActionListBody>
  </ActionList>
</template>

Best practices ​

Action lists should:

• Be used for secondary or less important information and actions since they're hidden until users expose them by opening a popover
• Contain actions that are related to each other

Content guidelines ​

Action lists ​

Each item in an action list should be clear and predictable. Users should be able to anticipate what will happen when they click on an action.

Each item in an action list should always lead with a strong verb that encourages action. To provide enough context use the {verb}+{noun} format unless the action is clear with a single verb.

Each item in an action list should be scannable avoiding unnecessary words and articles such as "the", "an", or "a".

Accessibility ​

Items in an action list are organized as list items (<li>) in an unordered list (<ul>) and are conveyed as a group of related elements to assistive technology users. Each item is implemented as a button.