Tabs
Tabs are a component that subdivides page content into panes, which are displayed individually based upon which tab is active. They typically span the entire container width, and the active tab is clearly indicated.
Coded Components
Helper classes: Looking for a complete list of helper classes for these components?View helper classes
Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.
Standard Tabs
Standard Tabs (Single Overflow)
Standard Tabs (Pagination Overflow)
Justified Tabs
Justified Tabs (Single Overflow)
Justified Tabs (Pagination Overflow)
Centered Tabs
Centered Tabs (Single Overflow)
Centered Tabs (Pagination Overflow)
Centered Tabs with Image
Centered Tabs with Image (Single Overflow)
Centered Tabs with Image (Pagination Overflow)
Heading
Vertical Tabs
Usage
Tabs are only used when there are two or more in the set.
When filtering the content of a tab, the filter controls should appear at the top of the active tab panel, beneath the row of tab links.
Tab Links
Content Guidelines
Only images and text may be displayed within a tab link.
- A tab label is required.
- A paragraph of supporting text, following the tab label, is optional.
- An image, preceding the tab label, is optional.
Tab links should use meaningful text that clearly communicates what's within the corresponding tab panel.
Words within a tab link may hyphenate.
If there's insufficient space to display all of the text in a tab link, then truncate using ellipses "...". As always, mouse hover (or hold-press on touchscreen) should reveal the full text within a tooltip.
Overflow Controls
When the tab links exceed the available container width, they are clipped at the right fold.
Overflow controls (left/right arrows) are shown when the tab links are clipped. These function like the controls for filmstrip carousel.
Off-Canvas Modal
On smaller breakpoints, tab links become a vertical option list.
Select one of the options in the vertical list to open an off-canvas modal that contains the tab content.
Tab URL
Selecting a tab (other than the active default) should modify the page URL so that users can easily share or return to the context.
Localization
Tab links become right-aligned, and their order is reversed, for languages that read right-to-left.
Keyboard Interaction
Tab In/Out
When focus moves into a tab list, place focus on the active tab.
When the tab list already has focus, Tab key moves focus to the next element outside the tablist, which is either the first focusable element inside the tab panel or the tab panel itself.
Switching Between Tabs
When the tab list already has focus, Left Arrow moves focus to the previous tab. If focus is on the first tab, move focus to the last tab.
- If the tabs are in a vertical list on a smaller breakpoint, Up Arrow key performs as Left Arrow described above.
When the tab list already has focus, Right Arrow moves focus to the next tab. If focus is on the last tab element, move focus to the first tab.
- If the tabs are in a vertical list on a smaller breakpoint, Down Arrow key performs as Right Arrow described above.
Home key moves focus to the first tab.
End key moves focus to the last tab.
Tabs are automatically activated, and their corresponding panel is displayed, when they receive focus.
Do's and Don'ts
Do.
Don't.
Do.
Don't.
Do.
Don't.
Common Button Labels and Usage
Title case, 2-3 words maximum.
Do not combine actions in a label (exception:
"Customize & Buy").
If standard labels don't fit the button's
purpose, align label with the task the user is attempting.
Please refer to the
Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information
regarding call-to-action labels and usage.
Button
Label:
Corresponding Action:
Add to
Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign
In/Sign Out
View
Details
Ok/Cancel
Learn
More
Close
Takes
users to Cart page, with item added
Used
for search buttons
Takes
users back to entry point for a task
Used to
save an item
Navigates users to change an item
Deletes
an item on the page, usually with a verification step
Used as
progression
Used
as forward and backward navigation (Next is primary, Previous is secondary)
Used
to submit a task or info
Used
for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used
instead of “Select” in cases of product details or within learn content
For
use in modal verification steps when more specific CTAs will not fit due to space
Used
to link users to more learning content or contextual help
Used
within modal windows
Accessibility
To be determined.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the best practices for tabs from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for tabs from WAI-ARIA 1.1.
You may refer to this example of tabs with automatic activation and this example of tabs with manual activation from WAI-ARIA practices 1.1.