Toolbar

Toolbars apply special formatting to supported elements for use as list controls and other similar places.


React Component

Toolbars currently support secondary buttons, checkboxes, dropdowns, search, and plain text. Each of these can also be placed inside a nested SageToolbarGroup to merge items with borders.

Basic toolbar

Plain text

Button toolbar in a SageToolbarGroup

Search field with dropdown in a SageToolbarGroup

Mixed content toolbar in a SageToolbarGroup

Sage Component

SageToolbar
<% dropdown_items = [
  {
    value: "Edit",
    icon: "pen",
    attributes: { "href": "#" },
  },
  {
    value: "Disabled link w/ tooltip",
    icon: "pen",
    modifiers: ["disabled"],
    attributes: {
      "href": "https://kajabi.com",
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right",
    }
  },
  {
    value: "New",
    icon: "add",
    style: "primary",
    attributes: { "href": "#" },
  }, {
    value: "Share Element",
    icon: "url",
    modifiers: ["border-before"],
    attributes: { "href": "#" },
  }, {
    value: "Take A Dangerous Action",
    icon: "remove-circle",
    style: "danger",
    attributes: { "href": "#" },
  }, {
    value: "Disabled w/ Tooltip",
    icon: "users",
    attributes: {
      "data-js-tooltip": "Tooltip",
      "data-js-tooltip-position": "right"
      },
    modifiers: ["disabled"]
  }
] %>

<%= md("
  Toolbars currently support secondary buttons, checkboxes, dropdowns, search, and plain text.
  Each of these can also be placed inside a nested `SageToolbarGroup` to merge items with borders.
", use_sage_type: true) %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>">Basic toolbar</h3>

<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageSearch, {
    id: "search-basic",
    hide_label: true,
    placeholder: "Search Products",
    value: nil,
    contained: true,
    label_text: "Search"
  } %>

  <%= sage_component SageButton, {
    value: "Edit",
    style: "secondary",
    icon: {
      name: "pen",
      style: "only",
    },
  } %>

  <%= sage_component SageCheckbox, {
    name: "checkbox-basic",
    id: "checkbox-basic",
    label_text: "Checked",
    value: "Edit",
  } %>

  <%= sage_component SageDropdown, { items: dropdown_items, align: "right" } do %>
    <% content_for :sage_dropdown_trigger, flush: true do %>
      <%= sage_component SageButton, {
        style: "secondary",
        value: "Menu",
        icon: {
          style: "right",
          name: "menu"
        }
      } %>
    <% end %>
  <% end %>

  <p>Plain text</p>
<% end %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>"><%= md("Button toolbar in a `SageToolbarGroup`") %></h3>
<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageButton, {
      value: "Button",
      style: "secondary",
    } %>
    <%= sage_component SageButton, {
      value: "Another button",
      style: "secondary",
    } %>
    <%= sage_component SageButton, {
      value: "Ayy one more button",
      style: "secondary",
    } %>
  <% end %>
<% end %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>"><%= md("Search field with dropdown in a `SageToolbarGroup`") %></h3>
<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageDropdown, { items: dropdown_items } do %>
      <% content_for :sage_dropdown_trigger, flush: true do %>
        <%= sage_component SageButton, {
            style: "secondary",
            value: "Search options",
            icon: {
              style: "right",
              name: "caret-down"
            }
          } %>
      <% end %>
    <% end %>
    <%= sage_component SageSearch, {
      id: "search-options",
      hide_label: true,
      placeholder: "Search…",
      value: nil,
      contained: true,
      label_text: "Search",
    } %>
  <% end %>
<% end %>

<h3 class="<%= SageClassnames::TYPE::HEADING_6 %>"><%= md("Mixed content toolbar in a `SageToolbarGroup`") %></h3>
<%= sage_component SageToolbar, {} do %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageFormInput, {
      id: "custom-input-field",
      hide_label: true,
      input_type: "email",
      label_text: "Yes",
      placeholder: "Email address",
      required: true,
      disabled: false,
      has_error: false,
      name: "custom_input_field",
    } %>
    <%= sage_component SageButton, {
      value: "Sign up",
      style: "primary",
    } %>
  <% end %>
  <%= sage_component SageToolbarGroup, {} do %>
    <%= sage_component SageDropdown, { items: dropdown_items } do %>
      <% content_for :sage_dropdown_trigger, flush: true do %>
        <%= sage_component SageButton, {
          style: "secondary",
          value: "Dropdown",
          icon: {
            name: "gear",
            style: "only"
          }
        } %>
      <% end %>
    <% end %>

    <%= sage_component SageSearch, {
      id: "search-2",
      hide_label: true,
      placeholder: "Search Products",
      value: nil,
      contained: true,
      label_text: "Search",
    } %>

    <%= sage_component SageButton, {
      value: "Remove",
      style: "secondary",
    } %>
  <% end %>
<% end %>

Don't
  • Plain text should not be placed inside groups