Components

Card Base Actions

A card subcomponent that enables the user to take action via one or more buttons

Overview

  • Available since: Orlando
  • A11Y: Not compliant

Card actions are interactive elements found within a card that help facilitate user engagement with tasks related to the card's context.

ServiceNow link
Card Base Actions code documentation

UIB and developer guidance

Figma link
Card Base Actions Figma component

Horizon components and styles library

Loading playground

When to use

Use card actions to offer users direct interactions relevant to the card's content. They're great for providing a clear path to actions like cancel and confirm, or performing operations like rejecting or approving incoming tasks.

When not to use

If the card represents a complex object with many possible actions, don’t use card actions. Instead, consider simplifying the interaction or guiding the user to a detailed view for more complex operations.

Anatomy

card action anatomy
  1. Container: Area within the card that contains the card actions
  2. Button: Action or set of actions related to the contents of the card

Subcomponents

See usage guidance for card

See usage guidance for card (header)

See usage guidance for card (footer)

See usage guidance for button

Usage

Use card base actions for any actions associated with a card.

Variants

Learn about the attributes of card base actions.

Types

Card base actions is a subcomponent of the card component.

Variants

Card base actions contain buttons. For further guidance on each type of button variant, review the usage guidance for the button component.

Primary

Use a primary action for the most important action in the card. Only use one primary action per card so that you don't overwhelm the user with choices.

card action variant primary button

This “Start” button is an example of primary action.

Secondary

Use a secondary action for actions that supplement the primary action. The secondary variant is the default for button.
Additionally, if a primary variant already exists in the action area, use the secondary variant for any other buttons. You can also add secondary actions to the card header or card footer subcomponents.

card action variant secondary button

Tertiary

Use a tertiary action for optional actions. The tertiary action complements the primary and secondary buttons but doesn't visually compete with them.

card action variant tertiary button

Positive and negative buttons

Positive and negative buttons allow a user to accept or confirm an action. Provide a strong contrast between the two decisions to reinforce what action the user is about to take. You can use positive and negative buttons as either primary or secondary actions.

card action variant positive negative

In this example, the buttons use the secondary positive and negative variants in a card.

Configurations

You can either use the predefined layout of the card base actions component or create your own custom layout. For additional configurations on buttons, see button usage guidelines.

Multiple buttons

You can include up to three buttons in the card base actions component. If you have multiple buttons within the card base actions container, the buttons should fill the full width.

card action multi button

If you need different types of buttons to represent hierarchy, add another card base actions component.

card action configurations more than three buttons

The “Add to Cart” button is the primary action for this card and is in its own container. The additional bare buttons are contained within their own card base actions component.

Design recommendations

Learn how to apply card base actions in your design.

card action application do
Do

If you want to position a button in the center of the container, it should span the width of the container.

card action application dont
Don’t

Don't center align a fixed-width button within the action bar.

Alignment and positioning

Learn how to place card base actions and any elements in your design.

Buttons

Position buttons relative to the flow of the content.

UI text guidelines

These are some recommendations for using text within card base actions:

  • If you’re including positive and negative actions, the verbs should be opposites
    • For example, the buttons could be “Accept” and “Reject”

Behavior

Learn how card base actions behaves when the display changes or a user interacts with the component.

Responsive behavior

If you position a button or toggle to the right or left of the card base actions container, these elements remain in the same position as the display gets smaller.

Usability

Card base actions complies with all internationalization and accessibility requirements.

Internationalization

When the display translates to a right-to-left (RTL) language, the text flips direction. Icons flip only if they indicate direction.

card action internationalization.png

Accessibility

Learn how to access the actionable elements of card base actions through keyboard interactions and screen readers.

Keyboard interactions

To activate a button, select Space or Enter.
After activating the button, focus is set depending on the type of action the button performs:

  • If activating the button opens a dialog, the focus moves inside the dialog.
  • If activating the button closes a dialog, focus returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element; for example, activating a "Cancel" button in a dialog returns focus to the button that opened it.
  • If activating the button doesn't dismiss the current context, then focus remains on the button after activation.
  • If the button action indicates a context change (such as moving to the next step in a wizard or adding search criteria), then move focus to the starting point for that action.
  • If the user activates the button with a shortcut key, the focus remains in the context from which the shortcut key was activated.

Screen readers

The ARIA role for the card base actions component is button, and the button has an accessible label.

  • By default, the accessible name is computed from any text content inside the button element; however, it can also be provided with aria-labelledby or aria-label properties.
  • If a description of the button's function is present, the button element has an aria-describedby property set to the ID of the element that contains the description.
  • When the action associated with a button is unavailable, the aria-disabled state of the button is set to true.
  • If the button is a toggle button, it has an aria-pressed state.