Skip to content

Action Item

Useful for listing out multiple related actions when buttons might be too visually busy.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. Accessibility
  4. Specifications
    1. Properties
    2. Styling
      1. Colors
  5. Changelog
  6. Related
    1. Contains
  7. Examples

Anatomy

  1. Main content slot
  2. Icon (optional)
  3. Action icon

Usage Guidelines

This component is especially useful when multiple related actions need to be listed next to each other, and using buttons would be too overwhelming. It can function as a button element for JS interactions or a standard link.

Accessibility

If the inner content is not an accurate description of the link location or what will happen when interacting with this component, make sure an aria-label attribute is included.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
slotstring inner HTML content Yes-
elstring HTML element used as the container. If an href attribute is supplied, this defaults to a instead of buttonNo"button"
iconstring Name of fontawesome icon, placed before the main content No-
action_iconstring Name of fontawesome icon used after the main content No"solid\/arrow-right"

Styling

Colors

NameApplicationCustom PropertyRolesDefault OpacityDescription
main-colormixed-primary, on-background--
on-main-coloricon-on-primary, background--

Changelog

1.34.0

  • action-item added

Contains

Other core components embedded within this template.

Examples

Default

Pretzels! 
<x-action-item href="#hello">Pretzels!</x-action-item>

Icon

Pretzels! 
<x-action-item href="#hello" icon="solid/user">Pretzels!</x-action-item>

List

Multiple action items placed in a line list

<ul class="tux-c-line-list tux-c-line-list--flush tux-c-line-list--outer">
	<li><x-action-item href="#example-1">Magna Egestas Venenatis Mollis</x-action-item></li>
	<li><x-action-item href="#example-2">Fermentum Dolor Quam Ligula Pharetra</x-action-item></li>
	<li><x-action-item href="#example-3">Ultricies Tellus Fusce Malesuada</x-action-item></li>
	<li><x-action-item href="#example-4">Nibh Cras</x-action-item></li>
	<li><x-action-item href="#example-5">Quam Pharetra Malesuada</x-action-item></li>
</ul>

List w/Icons

Multiple action items placed in a line list with icons

<ul class="tux-c-line-list tux-c-line-list--flush tux-c-line-list--outer">
	<li><x-action-item href="#example-1" icon="solid/info-circle">Magna Egestas Venenatis Mollis</x-action-item></li>
	<li><x-action-item href="#example-2" icon="solid/phone">Fermentum Dolor Quam Ligula Pharetra</x-action-item></li>
	<li><x-action-item href="#example-3" icon="solid/envelope">Ultricies Tellus Fusce Malesuada</x-action-item></li>
	<li><x-action-item href="#example-4" icon="solid/user">Nibh Cras</x-action-item></li>
	<li><x-action-item href="#example-5" icon="solid/map-marker-alt">Quam Pharetra Malesuada</x-action-item></li>
</ul>