Cards are used to group similar concepts and tasks together for merchants to scan, read, and get things done. It displays content in a familiar and recognizable style.

Examples

<.button_group>
  <:item><.button>Cancel</.button></:item>
  <:item><.button variant="primary">Save</.button></:item>
</.button_group>

<.button_group>
  <:complex_action content="Cancel" />
  <:complex_action content="Save" variant="primary" />
</.button_group>

See

• https://polaris.shopify.com/components/actions/button-group
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/ButtonGroup/ButtonGroup.tsx

Attributes

• gap (:string) - Determines the space between button group items.Must be one of "extraTight", "tight", or "loose".
• variant (:string) - Styling variant for group.Must be one of "segmented".
• full_width (:boolean) - Buttons will stretch/shrink to occupy the full width.

Slots

• button
• inner_block
• complex_action - Complex action, rendered as a basic button. Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.