ba-tab-chip

A tab component (styled as a chip) which allows the user to select a single option from a selection of categories.

Figma

GitHub

Storybook

Live Demo

Tab 1

Tab 2

Tab 3

Tab 1

Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim culpa. Dolore adipisicing commodo amet eu do Lorem veniam. Aliqua sit fugiat deserunt excepteur consequat veniam cupidatat incididunt tempor. Ut minim adipisicing laborum et. Amet anim cillum eiusmod nulla et irure. Consequat incididunt commodo adipisicing velit ipsum et. Sint sunt ad ex non incididunt ad et amet cupidatat eu irure dolor aliquip pariatur.

Tab 2

Tab 3

<ba-grid row-gutter-320vw="16">
  <ba-tab-chip-group>
    <ba-tab-chip name="tab1">Tab 1</ba-tab-chip>
    <ba-tab-chip name="tab2">Tab 2</ba-tab-chip>
    <ba-tab-chip name="tab3">Tab 3</ba-tab-chip>
  </ba-tab-chip-group>

  <ba-tab-chip-content name="tab1">
    <ba-content>
      <h4>Tab 1</h4>
      <p>
        Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim
        culpa. Dolore adipisicing commodo amet eu do Lorem veniam. Aliqua sit
        fugiat deserunt excepteur consequat veniam cupidatat incididunt tempor.
        Ut minim adipisicing laborum et. Amet anim cillum eiusmod nulla et
        irure. Consequat incididunt commodo adipisicing velit ipsum et. Sint
        sunt ad ex non incididunt ad et amet cupidatat eu irure dolor aliquip
        pariatur.
      </p>
    </ba-content>
  </ba-tab-chip-content>

  <ba-tab-chip-content name="tab2">
    <ba-content>
      <h4>Tab 2</h4>
      <p>
        Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim
        culpa. Dolore adipisicing commodo amet eu do Lorem veniam. Aliqua sit
        fugiat deserunt excepteur consequat veniam cupidatat incididunt tempor.
        Ut minim adipisicing laborum et. Amet anim cillum eiusmod nulla et
        irure. Consequat incididunt commodo adipisicing velit ipsum et. Sint
        sunt ad ex non incididunt ad et amet cupidatat eu irure dolor aliquip
        pariatur.
      </p>
    </ba-content>
  </ba-tab-chip-content>

  <ba-tab-chip-content name="tab3">
    <ba-content>
      <h4>Tab 3</h4>
      <p>
        Sint Lorem ipsum veniam occaecat magna deserunt amet amet veniam minim
        culpa. Dolore adipisicing commodo amet eu do Lorem veniam. Aliqua sit
        fugiat deserunt excepteur consequat veniam cupidatat incididunt tempor.
        Ut minim adipisicing laborum et. Amet anim cillum eiusmod nulla et
        irure. Consequat incididunt commodo adipisicing velit ipsum et. Sint
        sunt ad ex non incididunt ad et amet cupidatat eu irure dolor aliquip
        pariatur.
      </p>
    </ba-content>
  </ba-tab-chip-content></ba-grid
>

Guidelines

The chip labels should be kept to a minimum of 1-2 words. This helps quickly get the intent across and stops them from taking up too much room

Chips should be concise and scannable at a glance. Long chip labels can wrap, making them harder to read and reducing overall usability.

Keep labels short: Aim for fewer than 25 characters to ensure chips remain clear and compact.
Use clear wording: Choose simple, recognizable terms that don’t require extra explanation.
Avoid wrapping text: Wrapping increases visual clutter and can make chips appear inconsistent in size.

Accessibility

Key	Element	State	Behaviour
`Tab`	previous element in Dom	Previous element has focus	Moves focus onto the first `<ba-tab-chip>` element
`Left arrow`	`<ba-tab-chip>`	`<ba-tab-chip>` has focus	Moves focus to the next `<ba-tab-chip>` element
`Right arrow`	`<ba-tab-chip>`	`<ba-tab-chip>` has focus	Moves focus to the previous `<ba-tab-chip>` element
`Tab`	`<ba-tab-chip>`	`<ba-tab-chip>` has focus	Moves focus onto the relevant `<ba-tab-chip-content>` element

Use tabs to organize related content without overwhelming users, but be mindful that tabbed content is hidden by default until selected.

Prioritize key information: Place critical or frequently used content outside of tabs so it’s always visible.
Limit the number of tabs: Fewer tabs make it easier for users to discover and navigate content. Aim for clarity over quantity.

ba-tab-chip-group

Properties & Attributes

Property	Attribute	Description	Type	Default
`activeTabName`	`active-tab-name`	The name of the active tab.	`string \| undefined`	`undefined`
`group`	`group`	The group name of the tabs	`string \| undefined`	`undefined`

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<ba‑tab‑chip>`

Parent components

ba-tab-chip-group can be slotted into:

ba-tab-chip

Properties & Attributes

Property	Attribute	Description	Type	Default
`icon`	`icon`	The name of an icon to show	`string \| undefined`	`undefined`
`name`(required)	`name`	The name of the tab	`string`	`undefined`

Slots

Slot	Description	Permitted elements
Unnamed slot	The main text of the chip	`<Plain text>`, `<ba‑icon>`, `<span>`

Parent components

ba-tab-chip can be slotted into:

<ba‑tab‑chip‑group>

ba-tab-chip-content

Properties & Attributes

Property	Attribute	Description	Type	Default
`group`	`group`	The group name of the tabs	`string \| undefined`	`undefined`
`name`(required)	`name`	The name of the tab	`string`	`undefined`

Slots

Slot	Description	Permitted elements
Unnamed slot	The content for the tab	`<ba‑content>`, `<ba‑flex>`, `<ba‑form>`, `<ba‑grid>`

Parent components

ba-tab-chip-content can be slotted into:

Usage

Basic usage

An example of showing related content using the tab-chips

Basic usage

<ba-grid row-gutter-320vw="16">
  <ba-tab-chip-group>
    <ba-tab-chip name="tab1" icon="plane-3">Flights only</ba-tab-chip>
    <ba-tab-chip name="tab2" icon="ba-company">Flights + Hotels</ba-tab-chip>
    <ba-tab-chip name="tab3">Flights + Cars</ba-tab-chip>
  </ba-tab-chip-group>

  <ba-tab-chip-content name="tab1">
  </ba-tab-chip-content>

  <ba-tab-chip-content name="tab2">
  </ba-tab-chip-content>

  <ba-tab-chip-content name="tab3">
  </ba-tab-chip-content>
</ba-grid>

Multiple tab groups

You can use multiple groups of tabs and content on a page by assigning the same group attribute to the corresponding <ba-tab-chip-group> and <ba-tab-chip-content> elements. This links them together as related.

An example of using multiple tab groups on the same page

<ba-grid>
  <ba-grid row-gutter-320vw="16">
    <ba-tab-chip-group group="group1">
      <ba-tab-chip name="tab1">Flights only</ba-tab-chip>
      <ba-tab-chip name="tab2">Flights + Hotels</ba-tab-chip>
      <ba-tab-chip name="tab3">Flights + Cars</ba-tab-chip>
    </ba-tab-chip-group>

    <ba-tab-chip-content name="tab1" group="group1">
    </ba-tab-chip-content>

    <ba-tab-chip-content name="tab2" group="group1">
    </ba-tab-chip-content>

    <ba-tab-chip-content name="tab3" group="group1">
    </ba-tab-chip-content>
  </ba-grid>

  <ba-grid row-gutter-320vw="16">
    <ba-tab-chip-group group="group2">
      <ba-tab-chip name="tab1">Content</ba-tab-chip>
      <ba-tab-chip name="tab2">Profile</ba-tab-chip>
      <ba-tab-chip name="tab3">Membership</ba-tab-chip>
    </ba-tab-chip-group>

    <ba-tab-chip-content name="tab1" group="group2">
    </ba-tab-chip-content>

    <ba-tab-chip-content name="tab2" group="group2">
    </ba-tab-chip-content>

    <ba-tab-chip-content name="tab3" group="group2">
    </ba-tab-chip-content>
  </ba-grid>
</ba-grid>