Skip to content

docs: move Tabs style variants docs, add Aura style props #4900

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
web-padawan merged 4 commits into from
Dec 4, 2025
Merged

docs: move Tabs style variants docs, add Aura style props #4900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e8f047
docs: move Tabs style variants docs, add Aura style props
web-padawan Dec 4, 2025
d452620
fix: add missing applyTheme to tabs Lit examples
web-padawan Dec 4, 2025
b4e9176
Merge branch 'main' into docs/tabs-styling
web-padawan Dec 4, 2025
ded4160
Merge branch 'main' into docs/tabs-styling
web-padawan Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 0 additions & 161 deletions articles/components/tabs/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,167 +326,6 @@ include::{root}/frontend/demo/component/tabs/react/tabs-badges.tsx[render,tags=s
endif::[]
--


== Theme Variants

The following theme variants are available for Tabs and Tab Sheet.

=== Centered

By default, tabs are left-aligned. They can be centered using the `centered` theme variant.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/tabs/tabs-theme-centered.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/tabs/TabsThemeCentered.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/tabs/react/tabs-theme-centered.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

You can use this variant to suit your visual and stylistic preference. It's typically used for top-level navigation. However, use it only where appropriate since by default left-aligned tabs are more discoverable and what most users expect.


=== Equal-Width Tabs

Apply the `equal-width-tabs` theme variant to make each tab share equally the available space. This disables the ability to scroll, though, since the content never overflows.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/tabs/tabs-theme-equal-width.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/tabs/TabsThemeEqualWidth.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/tabs/react/tabs-theme-equal-width.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

Use this variant when there are a small number of tabs in a narrow space, such as for a tabbed sidebar and for mobile (i.e., portrait) layouts.


=== Minimal

The `minimal` theme variant reduces visual styles to a minimum.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/tabs/tabs-theme-minimal.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/tabs/TabsThemeMinimal.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/tabs/react/tabs-theme-minimal.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

You can generally use this to reduce visual clutter. However, use it with caution as it reduces the visual distinction of selected tabs to color only. This can be difficult to discern for many users.


=== Small

The `small` theme variant can be used to make the Tabs smaller. This can be good when space is limited. Compare the tabs here to previous ones. You can see these are slightly smaller.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/tabs/tabs-theme-small.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/tabs/TabsThemeSmall.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/tabs/react/tabs-theme-small.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--


=== Bordered

The `bordered` theme variant adds a border around the Tab Sheet component.

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/tabs/tabsheet-theme-bordered.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/tabs/TabSheetThemeBordered.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/tabs/react/tabsheet-theme-bordered.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--


== Prefix & Suffix

Custom content can be placed before or after the tabs in a Tab Sheet by placing that content in the `prefix` and `suffix` slots. Notice the additional content at both ends of the tab bar in this example.
Expand Down
Loading