Skip to contentShopify logoPolaris
  • What’s new
  • Getting started
  • Foundations
  • Design
  • Content
  • Patterns
    New
  • Components
    • Actions
      • Account connection
      • Button
      • Button group
      • Page actions
    • Layout and structure
      • Alpha card
        Alpha
      • Alpha stack
        Alpha
      • Bleed
        Alpha
      • Box
        Alpha
      • Callout card
      • Columns
        Alpha
      • Divider
        Alpha
      • Empty state
      • Form layout
      • Inline
        Alpha
      • Layout
      • Legacy card
        Legacy
      • Legacy stack
        Legacy
      • Media card
      • Page
    • Selection and input
      • Autocomplete
      • Checkbox
      • Choice list
      • Color picker
      • Combobox
      • Contextual save bar
      • Date picker
      • Drop zone
      • Filters
      • Form
      • Index filters
      • Inline error
      • Legacy filters
        Legacy
      • Radio button
      • Range slider
      • Select
      • Tag
      • Text field
    • Images and icons
      • Avatar
      • Icon
      • Keyboard key
      • Thumbnail
      • Video thumbnail
    • Feedback indicators
      • Badge
      • Banner
      • Exception list
      • Loading
      • Progress bar
      • Skeleton body text
      • Skeleton display text
      • Skeleton page
      • Skeleton tabs
      • Skeleton thumbnail
      • Spinner
      • Toast
    • Typography
      • Text
        Beta
    • Tables
      • Data table
      • Index table
    • Lists
      • Action list
      • Description list
      • List
      • Listbox
      • Option list
      • Resource item
      • Resource list
    • Navigation
      • Footer help
      • Fullscreen bar
      • Legacy tabs
        Legacy
      • Link
      • Navigation
      • Pagination
      • Tabs
      • Top bar
    • Overlays
      • Modal
      • Popover
      • Tooltip
    • Utilities
      • App provider
      • Collapsible
      • Frame
      • Scrollable
    • Deprecated
      • Caption
        Deprecated
      • Card
        Deprecated
      • Display text
        Deprecated
      • Grid
        Deprecated
      • Heading
        Deprecated
      • Setting toggle
        Deprecated
      • Sheet
        Deprecated
      • Stack
        Deprecated
      • Subheading
        Deprecated
      • Text container
        Deprecated
      • Text style
        Deprecated
      • Visually hidden
        Deprecated
  • Tokens
  • Icons
  • Contributing
  • Tools
  • Home
  • Components
  • Actions

Actions

  • Screenshot of the account-connection component

    Account connection

    The account connection component is used so merchants can connect or disconnect their store to various accounts. For example, if merchants want to use the Facebook sales channel, they need to connect their Facebook account to their Shopify store.

  • Screenshot of the button-group component

    Button group

    Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.

  • Screenshot of the button component

    Button

    Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.

  • Screenshot of the page-actions component

    Page actions

    Page actions let merchants take key actions at the bottom of specific pages in the interface. This is important because sometimes the primary call to action is hard to access when merchants are at the bottom of a page.

Leave feedback