ActivationCard

View source on GitHub
; Opens a new tab
See recent changes on GitHub
; Opens a new tab

ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.

Figma:
Partially ready
Web:
Ready
iOS:
N/A
Android:
N/A
A11y:
Ready

Props

Component props
Name
Type
Default
message
Required
string
-

Text to render inside the activation card to convey detailed information to the user. The message text has a fixed size.

status
Required
"notStarted" | "pending" | "needsAttention" | "complete"
-

Select the activation card status:

  • notStarted: A task that has not be started
  • pending: A task that is pending action
  • needsAttention: A task that requires the user's attention
  • complete: A task that has been completed
statusMessage
Required
string
-

A message to indicate the current status of the activation card.

title
Required
string
-

Heading to render inside the activation card above the message to convey the activation card topic to the user.

dismissButton
{|
  accessibilityLabel: string,
  onDismiss: () => void,
|}
-

Callback fired when the dismiss button is clicked (pressed and released) with a mouse or keyboard.
Supply a short, descriptive label for screen-readers to provide sufficient context about the dismiss button action. IconButtons do not render text for screen readers to read requiring an accessibility label.
Accessibility: accessibilityLabel populates aria-label.

{|
  accessibilityLabel: string,
  href: string,
  label: string,
  onClick?: ({|
    event:
      | SyntheticMouseEvent<HTMLButtonElement>
      | SyntheticMouseEvent<HTMLAnchorElement>
      | SyntheticKeyboardEvent<HTMLAnchorElement>
      | SyntheticKeyboardEvent<HTMLButtonElement>,
    dangerouslyDisableOnNavigation: () => void,
  |}) => void,
  rel?: "none" | "nofollow",
  target?: null | "self" | "blank",
|}
-

Link-role button to render inside the activation card as a call-to-action to the user.

  • label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.
  • accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like Click Here, Follow, or Read More can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.
  • onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.

ActivationCard can be paired with OnLinkNavigationProvider. See OnLinkNavigationProvider to learn more about link navigation.

Accessibility

Usage guidelines

When to use
  • Use in groups to describe the user's stage in a sequential path toward an overall action.
When not to use
  • As a single element communicating updates to the state or status of the surface. Use Callout instead.

Not started and Pending Cards

Needs attention and Complete Cards

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Partially ready
Component is live in Figma, however may not be available for all platforms.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.

OnLinkNavigationProvider
OnLinkNavigationProvider allows external link navigation control across all children components with link behavior.

Edit page on GitHub
; Opens a new tab