TabsTrigger

Overview

This component is a required child of TabsList. There is no limit on the number of triggers, but be aware of available horizontal space and text length for best results. Every TabsTrigger should have a corresponding TabsContent.

Examples

Basic Usage

Can accept any child for the display text, but current implementation assumes plain text or rich text and will be styled by this component's css.

Custom Child Components

TabsTrigger will accept other components like the typography components, but results are mixed. For instance, since HeadingTitle defines its text color and the Tabs component is not set to override that color, some features may not work correctly. Notice that when the HeadingTitle had active state, the text is still dark gray instead of white. Also, the note the excess margin bottom from the some legacy css (present in here, but wasn't present in the payload cms demo page).

Variants

Primary

Secondary

Props

Import

import { TabsTrigger } from '@im/integral/components/styled';