Button

Standard button styling with multiple display options. Can be applied on both button and link components.


React Component

Standard Buttons

Accent
Link
Link
Primary
Link
Link
Secondary
Link
Link
Danger
Link
Link

Subtle Buttons

Subtle Accent
Link
Link
Subtle Primary
Link
Link
Subtle Secondary
Link
Link
Subtle Danger
Link
Link

Button Groups

Button group: Align End
Button group: Align Space-Between
Button group: Button + Link
Link
Button group: Link + Buttons - Align Space-Between
Link
Button group: Align End with top border

Button Group Wrap

When enabled, button groups are no longer restricted to a single row, allowing contents to wrap to multiple lines via flex-wrap: wrap. Note: all button groups regardless of this attribute will wrap at breakpoints below sm-min to prevent horizontal scrolling on small screen devices. Click the button below to toggle button group wrapping throughout the page, and resize your browser to view the resulting change.

Disclosure Button

The disclosure button is used mainly with menus and dropdown components, accompanied with a down caret icon.

Disclosure Button with Icon

The disclosure button allows for an icon affordance.

Rich Text Editor Button

The disclosure button allows for an icon affordance.

Rich Text Editor Disclosure Button

The disclosure button allows for an icon affordance to exist with hidden text.

Loading State

Displays a loading indicator in the button, such as when a button is used to submit a form. Including the spinner_on_submit property will activate the loading state, and place the corresponding text as the aria-label.

Small Button

Sets a subtle button to be smaller in font-size and line-height. Enable the small treatment by adding the attribute: small: true.

Full Width

Displays a button that takes up 100% of the width of its container. Enable the full_width treatment by adding the attribute: full_width: true.

Sage Component

SageButton
<%
demo_configs = [
  {
    heading: "Accent",
    label: "Accent",
    style: "accent",
  },
  {
    heading: "Primary",
    label: "Primary",
    style: "primary",
  },
  {
    heading: "Secondary",
    label: "Secondary",
    style: "secondary",
  },
  {
    heading: "Danger",
    label: "Danger",
    style: "danger",
  }
]
%>

<h3>Standard Buttons</h3>

<% demo_configs.each do | config | %>
  <%= sage_component SageCardBlock, {} do %>
    <%= sage_component SageBadge, {
      color: "draft",
      value: config[:heading],
    } %>
  <% end %>

  <% [false, true].each do | disabled | %>
    <%= sage_component SageButtonGroup, { gap: :sm, spacer: { bottom: :sm }} do %>
      <%= sage_component SageButton, {
        value: "Button",
        style: config[:style],
        disabled: disabled,
      } %>

      <%= sage_component SageButton, {
        value: "Submit",
        style: config[:style],
        disabled: disabled,
        attributes: {
          type: "submit"
        }
      } %>

      <%= sage_component SageButton, {
        value: "Link",
        style: config[:style],
        attributes: {
          href: "#element-button"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Left icon",
        style: config[:style],
        icon: {
          style: "left",
          name: "menu"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Right icon",
        style: config[:style],
        icon: {
          style: "right",
          name: "menu"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Icon only",
        style: config[:style],
        icon: {
          style: "only",
          name: "menu"
        },
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        style: config[:style],
        disabled: disabled,
        custom_content_class: 'demo-custom-class',
      } do %>
        <strong>Custom</strong> <em>content</em>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h3>Subtle Buttons</h3>
<% demo_configs.each do | config | %>
  <%= sage_component SageCardBlock, {} do %>
    <%= sage_component SageBadge, {
      color: "draft",
      value: "Subtle #{config[:heading]}",
    } %>
  <% end %>

  <% [false, true].each do | disabled | %>
    <%= sage_component SageButtonGroup, { gap: :sm, spacer: { bottom: :sm }} do %>
      <%= sage_component SageButton, {
        value: "Button",
        style: config[:style],
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Link",
        style: config[:style],
        attributes: {
          href: "#element-button"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Left icon",
        style: config[:style],
        icon: {
          style: "left",
          name: "gear"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Right icon",
        style: config[:style],
        icon: {
          style: "right",
          name: "gear"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        value: "Icon only",
        style: config[:style],
        icon: {
          style: "only",
          name: "gear"
        },
        subtle: true,
        disabled: disabled
      } %>

      <%= sage_component SageButton, {
        style: config[:style],
        subtle: true,
        disabled: disabled
      } do %>
        <strong>Custom</strong> <em>content</em>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<h3>Button Groups</h3>
<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Align End",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm, align: "end" } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "secondary",
  } %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Align Space-Between",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm, align: "space-between" } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "secondary",
  } %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Button + Link",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
  <%= sage_component SageLink, {
    url: "#",
    label: "Link",
    external: false,
    launch: false,
    help_link: false,
    remove_underline: true,
    show_label: true,
    style: "secondary"
  } %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Link + Buttons - Align Space-Between",
  } %>
<% end %>
<%= sage_component SageButtonGroup, { gap: :sm, align: "space-between" } do %>
  <%= sage_component SageLink, {
    url: "#",
    label: "Link",
    external: false,
    launch: false,
    help_link: false,
    remove_underline: true,
    show_label: true,
    style: "secondary"
  } %>
  <%= sage_component SageButtonGroup, { gap: :sm } do %>
    <%= sage_component SageButton, {
      value: "Button",
      style: "secondary",
    } %>
    <%= sage_component SageButton, {
      value: "Button",
      style: "primary",
    } %>
  <% end %>
<% end %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Button group: Align End with top border",
  } %>
<% end %>

<%= sage_component SageButtonGroup, { gap: :sm, align: "end", borderTop: true } do %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "secondary",
  } %>
  <%= sage_component SageButton, {
    value: "Button",
    style: "primary",
  } %>
<% end %>

<h3>Button Group Wrap</h3>
<%= md("
  When enabled, button groups are no longer restricted to a single row, allowing contents to wrap to multiple lines via `flex-wrap: wrap`. **Note: all button groups regardless of this attribute will wrap at breakpoints below `sm-min` to prevent horizontal scrolling on small screen devices.**
  Click the button below to toggle button group wrapping throughout the page, and resize your browser to view the resulting change.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Toggle button group wrap",
    style: "primary",
    icon: {
      style: "right",
      name: "menu-bordered"
    },
    attributes: {
      id: "button-group-wrap-example"
    }
  } %>
</div>

<h3>Disclosure Button</h3>
<%= md("
  The disclosure button is used mainly with menus and dropdown components, accompanied with a down caret icon.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Month",
    disclosure: true,
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>

<h4>Disclosure Button with Icon</h4>
<%= md("
  The disclosure button allows for an icon affordance.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Add item",
    disclosure: true,
    icon: { name: "add", style: "left" },
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>

<h4>Rich Text Editor Button</h4>
<%= md("
  The disclosure button allows for an icon affordance.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    css_classes: "sage-btn--rich-text",
    value: "Add item",
    icon: { name: "add", style: "only" },
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>
<h4>Rich Text Editor Disclosure Button</h4>
<%= md("
  The disclosure button allows for an icon affordance to exist with hidden text.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    css_classes: "sage-btn--rich-text",
    value: "Add item",
    disclosure: true,
    small: true,
    icon: { name: "add", style: "only" },
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "secondary",
  } %>
</div>

<h3>Loading State</h3>
<%= md("
  Displays a loading indicator in the button, such as when a button is used to submit a form. Including the `spinner_on_submit` property will activate the loading state, and place the corresponding text as the `aria-label`.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Select to activate loading state",
    spinner_on_submit: "my aria label",
    attributes: {
      href: "#",
      rel: "noopener",
      title: "Open Sassdocs site"
    },
    style: "primary",
  } %>
</div>

<h3>Small Button</h3>
<%= md("
  Sets a subtle button to be smaller in `font-size` and `line-height`. Enable the `small` treatment by adding the attribute: `small: true`.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Small button here",
    style: "primary",
    subtle: true,
    small: true
  } %>
</div>

<h3>Full Width</h3>
<%= md("
  Displays a button that takes up 100% of the width of its container. Enable the `full_width` treatment by adding the attribute: `full_width: true`.
", use_sage_type: true) %>
<div>
  <%= sage_component SageButton, {
    value: "Full width button example",
    style: "primary",
    full_width: true
  } %>
</div>
Property Description Type Default

align

Aligns a button to the "right" rather than its default position.

["space-between" | "end"]

nil

attributes

For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes

Hash

nil

custom_content_class

Passes a custom CSS class for when custom HTML content is provided as content in the component. We recommend this be used primarily for controlling the layout of the custom content and to avoid any color modifications that would overrides system styles for buttons.

String

nil

disabled

Toggles whether or not the button is disabled. On button this implements the "disabled" HTML attribute but on hyperlinks it enables the aria-disabled="true".

Boolean

false

disclosure

Toggles whether or not the button is a disclosure button. Disclosure buttons are intended to be used with menus and dropdowns.

Boolean

false

spinner_on_submit

When the button is in a loading state, this text will be set as the aria-label.

String

nil

full_width

Forces a button to 100% the width of its container.

Boolean

false

icon

Allows for configurations for an icon and its placement to be provided.

icon: {
  name: String,
  style: ["left" | "right" | "only"],
}

nil

icon_only

Determines whether a button has an icon with hidden text and applies the appropriate styling.

Boolean

false

raised

Toggles "raised" shadows effect on standard buttons.

Boolean

false

small

Toggles whether buttons in the "subtle" format can be display in a regular (default) and small size using this property.

Boolean

false

style

Buttons have three different "styles" that affect color appearance to create a "primary", "secondary", and "danger" variation.

["primary" | "secondary" | "danger"]

primary

subtle

Whether or not to render the button in the "subtle" format.

Boolean

false

value

The value to show on the button. If the "only" style is set for "icon", this label is visually hidden.

String

nil

Button Group

align

Adjusts the alignment of the buttons within.

["center" | "end" | "space-between"]

nil

borderTop

Adds a border-top to the component.

Boolean

false

gap

Adjusts the size of the gap between buttons.

[:xs | :sm | :md | :lg]

nil

wrap

Applies at breakpoints > sm-min only. This overrides the default behavior of limiting button groups to a single horizontal row, allowing buttons to wrap to fit within containers.

Boolean

false