Tabs

Tabs are used to organize content by grouping similar information on the same page.

Variants

There are a total of 6 variations of Tabs to choose from in GEL.

Demo

Guidance

• A tab reveals associated content when activated.
• Only one tab can be active at a time.
• The large variation of tabs are page level provided by the template. The smaller default sized tabs can be used for content level tabs.

When to use

• Tabs are used to show one content section at a time while maintaining a view of related options.

When not to use

• If content is part of a flow, consider using the steps component instead.
• Avoid confusing tabs with navigation links. Tabs help users remain in the same context; use navigation link for changing context.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact GEL Community