# Action Item

ActionItem allows for consistent presentation of text content that can be
actioned on. It can use icons to provide additional visual context about the
text content.

## Design & usage guidelines

The ActionItem will provide a familiar pattern for enhancing text content with
icons and providing actions.

ActionItem is commonly used [in a Card](../Card/Card.md), where it can be
grouped with other ActionItems or other elements as needed.

If the action appears directly related to the title, or otherwise is not
well-suited to be centered in the ActionItem, you can
[align the action](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitem--action-alignment)
as needed.

## Content guidelines

ActionItem provides a pre-styled `title`, which can be used to consistently
title the element. You can use the
[title](/storybook/mobile/?path=/story/components-layouts-and-structure-actionitem--title-only)
and not pass any children. This is useful when you have empty states that
require the user's attention.

When an `onPress` is provided, the entire ActionItem is tappable for easy
interactivity. If a child of the ActionItem has an `onPress`, tapping directly
on that child will trigger the child item's `onPress`.

Child content can be whatever you need but typically consists of
[Text](../Text/Text.md).

## Related components

To group multiple ActionItems together with dividers between them, use
[ActionItemGroup](../ActionItemGroup/ActionItemGroup.md).

ActionItem is commonly consumed by [Card](../Card/Card.md). In most cases, it
will also render at least one [Icon](../Icon/Icon.md).

## Accessibility

The Icons in ActionItem should not be announced to assistive technology. The
entire contents of the ActionItem should be read as one element.

## Mockup


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `actionIcon` | `ActionIconNames` | No | `edit` | Action icon to display |
| `actionIconAlignment` | `"center" | "flex-end" | "flex-start"` | No | `center` | Alignment of action icon |
| `actionIconColour` | `ActionIconColour` | No | `interactive` | Colour of the action icon |
| `children` | `ReactNode` | No | — | Content to display. |
| `icon` | `IconNames` | No | — | Name of the icon to display before content |
| `iconColor` | `"task" | "text" | "warning" | "icon" | "iconSecondary" | "white" | "grey" | "greyBlue" | "greyBlueDark" | "greyBlueLighter" | "blue" | "lightBlue" | "green" | "yellow" | "red" | ... 35 more ... | "brandHighlight"` | No | — | Colour of the icon displayed before content |
| `onPress` | `() => void` | No | — | Press handler |
| `testID` | `string` | No | `actionItem` |  |
| `title` | `string` | No | — | Title of the Action Item |