diff --git a/components/tabs.mdx b/components/tabs.mdx index 7d23547fd..671d9ae1b 100644 --- a/components/tabs.mdx +++ b/components/tabs.mdx @@ -54,13 +54,22 @@ Use tabs to organize content into multiple panels that users can switch between. ```` -Tabs automatically synchronize with other tabs and [code groups](/components/code-groups) on the same page when their labels match. When you select a tab, all other tabs and code groups with the same label update to match your selection. You can disable this behavior by setting `sync={false}`. +Tabs with matching titles stay in sync across the page. For example, if you have multiple tab groups that include a `JavaScript` tab title, selecting `JavaScript` in one tab group automatically selects `JavaScript` in the others. This helps users who choose a language or framework once see that choice reflected everywhere. Tabs also sync with [code groups](/components/code-groups) that have matching titles. -## Properties +To disable tab synchronization, add `sync={false}` to a `` component. - - When `true`, tabs synchronize with other tabs and code groups on the page that have matching labels. Set to `false` to make tabs independent. - +```mdx Disable tab sync example + + + This tab group operates independently. + + + Selecting tabs here won't affect other tab groups. + + +``` + +## Properties The title of the tab. Short titles are easier to navigate. Tabs with matching titles synchronize their selections. @@ -74,6 +83,10 @@ Tabs automatically synchronize with other tabs and [code groups](/components/cod For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`. + + When `true`, tabs synchronize with other tabs and code groups on the page that have matching titles. Set to `false` to make tabs independent. + + Adds a bottom border and padding to the tabs container. Useful to visually separate tabbed content from the rest of the page, especially when tabs contain content of varying lengths.