Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • General: Actions
    • In-context actions
    1. Cloudscape Design System
    2. Patterns
    3. General: Actions
    4. In-context actions

    In-context actions

    Use in-context actions when there are actions tied to a singular element, resource or container.

    Published: February 10, 2023

    On this page

    1. Key UX concepts
    2. General guidelines
    3. Writing guidelines
    4. Related patterns

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Key UX concepts

    In-context actions are performed on only one resource. For example, actions related to specific data in a container, such as Manage tags. They should be placed contextually with the item they relate to. This helps speed up task completion for commonly used actions.

    In-context actions in a container

    Container title

    Container description

    Container content

    In-context actions in cards

    Cards title

    1. Item 1
      Description
        This is the first item
        Type
        1A
        Size
        Small
      • Item 2
        Description
          This is the second item
          Type
          1B
          Size
          Large

        In-context actions in tables

        Table title (2)

           
          Variable name
          Text value
          Type
          Description
          Actions
           
          Item 1
          First
          1A
          This is the first item
           
          Item 2
          Second
          1B
          This is the second item

          In-context action locations

          In-context actions should be placed in consistent and predictable locations in the interface.

          • Containers: Use the header to display the actions. Follow the guidelines for header component with actions.

          • Dashboard items: Use the header slot of the dashboard item. Follow the guidelines for dashboard items.

          • Tables:

            • Place these in the last column either as an inline icon button dropdown, an inline icon button, or a inline link button, depending on the action type. To maintain the visibility of available actions in table rows we recommend enabling the sticky table column feature to maintain visibility of the available actions.

            • When considering which actions to place as in-context actions in table rows, consult user data for commonly used actions that speed up repetitive tasks for your users.

            • You can persist one or two repetitive actions as a link or icon button to speed up task completion. In case of more than two actions, group them in a button dropdown to conserve space.

            • If there are no repetitive actions then place all actions in a button dropdown to conserve space.

            • For actions that are interconnected with a resource status, display the status column to inform users about the relationship. For example, for a reboot action, the status column should show that the resource is active.

          • Cards: Use the header or content area of the card to feature the actions. Follow the guidelines for cards.

          Icon button dropdown

          Use the inline icon button dropdown for in-context actions to reduce visual noise and optimize content density. For example placing download, copy, and share actions in an icon button dropdown.

          Disabled reasons - optional

          For extra clarity, provide a tooltip with inactive actions that explains why the action is unavailable. These tooltip explanations should be as short as possible, with longer descriptions belong outside the dropdown component. Follow the guidelines for disabled and read-only states.

          General guidelines

          Do

          • Use a button dropdown to present up to 7 contextual actions that users can choose from to initiate one action.
          • Sort the actions set in a logical and hierarchical order. Start with the most relevant and frequently used actions at the top.

          Writing guidelines

          General writing guidelines

          • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

          • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

          • Use present-tense verbs and active voice.

          • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

          • Avoid directional language.

            • For example: use previous not above, use following not below.

          • Use device-independent language.

            • For example: use choose or select not click.

          Related patterns

          Actions

          Ways to invoke actions in the interface.

          Global actions

          Use global actions when there’s a single set of actions, or bulk actions, to be taken against any or all resources in a given view or page.

          Button group

          Enable users to perform an action from a group of buttons.

          Did this page help you?

          Tell us more - optional

          1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
          • About
          • Connect
          • Privacy 
          • Site terms 
          • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
          Made with love atAWS