Tab

A tab button to be used inside a tabs component

React Component

As a button with a target pane in mind

As a button and icon with a target pane in mind

As a link with a route or site in mind

Page 1

As a link with a route and icon

Page 1

Sage Component

SageTab

<h3 class="t-sage-heading-6">As a button with a target pane in mind</h3>
<%= sage_component SagePanelBlock, {} do %>
  <%= sage_component SageTab, {
      target: "example-tab1",
      text: "Page 1",
    }
  %>
<% end %>

<h3 class="t-sage-heading-6">As a button and icon with a target pane in mind</h3>
<%= sage_component SagePanelBlock, {} do %>
  <%= sage_component SageTab, {
      target: "example-tab2",
      text: "Page 1",
      icon: "pen"
    }
  %>
<% end %>

<h3 class="t-sage-heading-6">As a link with a route or site in mind</h3>
<%= sage_component SagePanelBlock, {} do %>
  <%= sage_component SageTab, {
      attributes: {
        href: "//example.com",
      },
      text: "Page 1"
    }
  %>
<% end %>

<h3 class="t-sage-heading-6">As a link with a route and icon</h3>
<%= sage_component SagePanelBlock, {} do %>
  <%= sage_component SageTab, {
      attributes: {
        href: "//example.com",
      },
      text: "Page 1",
      icon: "pen"
    }
  %>
<% end %>

Property	Description	Type	Default
`active`	Toggles `--active` modifier to visually indicate whether this tab is active/selected.	Boolean	`false`
`attributes`	For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes	Hash	`nil`
`disabled`	Sets the state to "disabled" by default.	Boolean	`nil`
`icon`	Provides the name of the Sage Icon to be displayed before the text content.	String	`nil`
`target`	Provides the `id` for the corresponding Tab Pane that this tab will activate.	String	`nil`
`text` required	Sets the content of the text.	String	`nil`