> Markdown version of [Styling](https://vaadin.com/docs/next/components/tabs/styling). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Tabs Styling

## <a id="style-variants"></a>Style Variants

The following variants are supported by the Tabs:

| Variant               | Description                                      | Supported by                 |
| --------------------- | ------------------------------------------------ | ---------------------------- |
| `centered`            | Aligns tab elements to the center                | Lumo                         |
| `equal-width-tabs`    | Makes each tab share equally the available space | Lumo                         |
| `small`               | Reduces the size of tabs                         | Aura (since undefined), Lumo |
| `minimal`             | Reduces visual styles to a minimum               | Lumo                         |
| `hide-scroll-buttons` | Hides scroll buttons when the content overflows  | Aura, Lumo                   |
| `show-scroll-buttons` | Shows scroll buttons when the content overflows  | Aura, Lumo                   |
| `filled`              | Uses a solid background color for tabs           | Aura                         |

In addition to the above, the following variants are supported by the Tab Sheet:

| Variant      | Description                                         | Supported by |
| ------------ | --------------------------------------------------- | ------------ |
| `bordered`   | Shows border around the tab sheet component         | Lumo         |
| `no-border`  | Removes border around the tab sheet component       | Aura         |
| `no-padding` | Removes the padding from the tab sheet content area | Aura, Lumo   |

### <a id="centered"></a>Centered

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

**Lit** — `tabs-theme-centered.ts`

```html
<vaadin-tabs theme="centered">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Flow** — `TabsThemeCentered.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_CENTERED);
```

**React** — `tabs-theme-centered.tsx`

```tsx
<Tabs theme="centered">
  <Tab>Details</Tab>
  <Tab>Payment</Tab>
  <Tab>Shipping</Tab>
</Tabs>
```

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.

### <a id="equal-width-tabs"></a>Equal-Width Tabs

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

**Lit** — `tabs-theme-equal-width.ts`

```html
<vaadin-tabs theme="equal-width-tabs">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Flow** — `TabsThemeEqualWidth.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_EQUAL_WIDTH_TABS);
```

**React** — `tabs-theme-equal-width.tsx`

```tsx
<Tabs theme="equal-width-tabs">
  <Tab>Details</Tab>
  <Tab>Payment</Tab>
  <Tab>Shipping</Tab>
</Tabs>
```

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.

### <a id="minimal"></a>Minimal

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

**Lit** — `tabs-theme-minimal.ts`

```html
<vaadin-tabs theme="minimal">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Flow** — `TabsThemeMinimal.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_MINIMAL);
```

**React** — `tabs-theme-minimal.tsx`

```tsx
<Tabs theme="minimal">
  <Tab>Details</Tab>
  <Tab>Payment</Tab>
  <Tab>Shipping</Tab>
</Tabs>
```

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.

### <a id="small"></a>Small

The `small` 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.

**Lit** — `tabs-theme-small.ts`

```html
<vaadin-tabs theme="small">
  <vaadin-tab>Details</vaadin-tab>
  <vaadin-tab>Payment</vaadin-tab>
  <vaadin-tab>Shipping</vaadin-tab>
</vaadin-tabs>
```

**Flow** — `TabsThemeSmall.java`

```java
Tab details = new Tab("Details");
Tab payment = new Tab("Payment");
Tab shipping = new Tab("Shipping");

Tabs tabs = new Tabs(details, payment, shipping);
tabs.addThemeVariants(TabsVariant.LUMO_SMALL);
```

**React** — `tabs-theme-small.tsx`

```tsx
<Tabs theme="small">
  <Tab>Details</Tab>
  <Tab>Payment</Tab>
  <Tab>Shipping</Tab>
</Tabs>
```

### <a id="bordered"></a>Bordered

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

**Lit** — `tabsheet-theme-bordered.ts`

```html
<vaadin-tabsheet theme="bordered">
  <vaadin-tabs slot="tabs">
    <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
    <vaadin-tab id="payment-tab">Payment</vaadin-tab>
    <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
  </vaadin-tabs>

  <div tab="dashboard-tab">This is the Dashboard tab content</div>
  <div tab="payment-tab">This is the Payment tab content</div>
  <div tab="shipping-tab">This is the Shipping tab content</div>
</vaadin-tabsheet>
```

**Flow** — `TabSheetThemeBordered.java`

```java
tabSheet.addThemeVariants(TabSheetVariant.LUMO_BORDERED);
```

**React** — `tabsheet-theme-bordered.tsx`

```tsx
<TabSheet theme="bordered">
  <TabSheetTab label="Dashboard">
    <div>This is the Dashboard tab content</div>
  </TabSheetTab>

  <TabSheetTab label="Payment">
    <div>This is the Payment tab content</div>
  </TabSheetTab>

  <TabSheetTab label="Shipping">
    <div>This is the Shipping tab content</div>
  </TabSheetTab>
</TabSheet>
```

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/next/styling/styling-components.md#component-style-properties) for more information on style properties.

### <a id="tab-properties"></a>Tab Properties

| Property                     | Supported by |
| ---------------------------- | ------------ |
| `--vaadin-tab-background`    | Aura         |
| `--vaadin-tab-border-color`  | Aura         |
| `--vaadin-tab-border-radius` | Aura         |
| `--vaadin-tab-border-width`  | Aura         |
| `--vaadin-tab-font-size`     | Aura         |
| `--vaadin-tab-font-weight`   | Aura         |
| `--vaadin-tab-gap`           | Aura         |
| `--vaadin-tab-line-height`   | Aura         |
| `--vaadin-tab-padding`       | Aura         |
| `--vaadin-tab-text-color`    | Aura         |

### <a id="tabs-properties"></a>Tabs Properties

| Property                      | Supported by |
| ----------------------------- | ------------ |
| `--vaadin-tabs-background`    | Aura         |
| `--vaadin-tabs-border-color`  | Aura         |
| `--vaadin-tabs-border-radius` | Aura         |
| `--vaadin-tabs-border-width`  | Aura         |
| `--vaadin-tabs-gap`           | Aura         |
| `--vaadin-tabs-padding`       | Aura         |

### <a id="tab-sheet-properties"></a>Tab Sheet Properties

| Property                          | Supported by |
| --------------------------------- | ------------ |
| `--vaadin-tabsheet-border-color`  | Aura         |
| `--vaadin-tabsheet-border-radius` | Aura         |
| `--vaadin-tabsheet-border-width`  | Aura         |
| `--vaadin-tabsheet-gap`           | Aura         |
| `--vaadin-tabsheet-padding`       | Aura         |

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/next/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

### <a id="tabsheet"></a>Tabsheet

- Root element

  `vaadin-tabsheet`

- Tabs wrapper

  `vaadin-tabsheet::part(tabs-container)`

- Content wrapper

  `vaadin-tabsheet::part(content)`

- Content loading indicator

  `vaadin-tabsheet::part(loader)`

### <a id="tabs"></a>Tabs

- Root element

  `vaadin-tabs`

- Horizontal tabs

  `vaadin-tabs[orientation="horizontal"]`

- Vertical tabs

  `vaadin-tabs[orientation="vertical"]`

- Tab container

  `vaadin-tabs::part(tabs)`

- Back button

  `vaadin-tabs::part(back-button)`

- Back button icon

  `vaadin-tabs::part(back-button)::after`

- Forward button

  `vaadin-tabs::part(forward-button)`

- Forward button icon

  `vaadin-tabs::part(forward-button)::after`

### <a id="tab"></a>Tab

- Root element

  `vaadin-tab`

- Selected

  `vaadin-tab[selected]`

- Focused

  `vaadin-tab[focused]`

- Keyboard focused

  `vaadin-tab[focus-ring]`

- Pressed

  `vaadin-tab[active]`

- Hovered

  `vaadin-tab:hover`

- Disabled

  `vaadin-tab[disabled]`

- With tooltip

  `vaadin-tab[has-tooltip]`

- Selection indicator

  `vaadin-tab::before`

- Icon in tab

  `vaadin-tab > vaadin-icon`