## Feature Examples ### Size - description:

Control tabs size with size prop:

  • Use small in dense layouts, like narrow panels.
  • Use medium (default) in all other layouts, like below .
    • - example: ```jsx () => { const [activeId, setActiveId] = React.useState(2); return ( setActiveId(value.id)} items={[ { id: 1, title: 'Small' }, { id: 2, title: 'Small' }, ]} /> setActiveId(value.id)} items={[ { id: 1, title: 'Medium' }, { id: 2, title: 'Medium' }, ]} /> ); }; ``` ### Min width - description:

    By default, tabs fill in the entire width of their parent container and have a minimum width of 628 px.

    Set custom min width of tabs using the minWidth prop.

    - example: ```jsx () => { const [activeId, setActiveId] = React.useState(2); return ( setActiveId(value.id)} items={[ { id: 1, title: 'Default' }, { id: 2, title: 'Default' }, ]} /> setActiveId(value.id)} items={[ { id: 1, title: 'Min width' }, { id: 2, title: 'Min width' }, ]} /> ); }; ``` ### Type - description:

    Control how tabs are positioned with type prop:

  • By default, each tab grows with its title. Side paddings are inside tabs.
  • compact - each tab grows with its title. Side paddings are outside tabs.
  • compactSide - each tab grows with its title. Side paddings are outside tabs. The first and the last tab has no left and right paddings respectively.
  • uniformSide - each tab grows to the size defined in width prop. If tab content is longer than the width, it gets truncated by ellipsis. Side paddings are inside tabs.
  • uniformFull - all tabs grow equally to fill in the whole container. Side paddings are inside tabs.
    • - example: ```jsx () => { const [activeId, setActiveId] = React.useState(1); return ( Default setActiveId(value.id)} /> Compact setActiveId(value.id)} /> Compact side setActiveId(value.id)} /> Uniform side setActiveId(value.id)} /> Uniform full setActiveId(value.id)} /> ); }; ``` ### Alignment - description:

    Control text alignment inside tabs with alignment prop. It supports 3 options:

  • Use start (default) to align tab titles to to the left.
  • Use center to align them to the middle.
  • Use end to align them to the right.
    • - example: ```jsx () => { const [activeId, setActiveId] = React.useState(1); return ( setActiveId(value.id)} /> setActiveId(value.id)} /> setActiveId(value.id)} /> ); }; ``` ### Bottom divider - description:

    Control if the default bottom divider is shown with hasDivider prop.

    - example: ```jsx () => { const [activeId, setActiveId] = React.useState(1); return ( setActiveId(value.id)} items={[ { id: 1, title: 'Default' }, { id: 2, title: 'Default' }, ]} /> setActiveId(value.id)} items={[ { id: 1, title: 'No divider' }, { id: 2, title: 'No divider' }, ]} /> ); }; ``` ### Side content - description:

    Add any component to the end of tabs with sideContent prop.

    For example, use it to store a filter or form actions like Save and Cancel.

    - example: ```jsx () => { const [activeId, setActiveId] = React.useState(1); return ( setActiveId(value.id)} items={[ { id: 1, title: 'Tab' }, { id: 2, title: 'Tab' }, ]} sideContent= Side content /> ); }; ``` ## Common Use Case Examples ### In a page - description:

    Use tabs to divide all page contents into shorter, digestible parts.

    Divide content in a way that allows users completing their task under each tab independently.

    - example: ```jsx () => { const [activeId, setActiveId] = React.useState(1); const tabContent = { 1: ( Guests register by submitting yes & no responses. Learn More } /> ), 2: ( Create Automations } image={ } /> ), 3: ( {}>Create Invitation} ), }; return ( {}} /> } showBackButton onBackClicked={() => {}} title="90s Rock Concert" actionsBar= /> setActiveId(value.id)} items={[ { id: 1, title: 'Event details' }, { id: 2, title: 'Emails' }, { id: 3, title: 'Guest list' }, ]} /> {tabContent[activeId]} ); }; ``` ### In a panel - description:

    Let users switch between parts of content in the same context of a .

    Select to show either panel divider or a default tabs’ divider to separate panel header from its main content.

    - example: ```jsx () => { const [selectedSidebar, setSelectedSidebar] = React.useState(0); const [activeTab, setActiveTab] = React.useState(0); const [toggleImage, setToggleImage] = React.useState(true); const [togglePosts, setTogglePosts] = React.useState(false); const [toggleCommenting, setToggleCommenting] = React.useState(false); const [descriptionValue, setDescriptionValue] = React.useState(''); const [authorTags, setAuthorTags] = React.useState([]); const [publishDate, setPublishDate] = React.useState(); const [author, setAuthor] = React.useState(); const items = [ { id: 0, label: 'Settings', icon: , }, { id: 1, label: 'Categories', icon: , }, { id: 2, label: 'Tags', icon: , }, ]; const authorOptions = [ listItemSelectBuilder({ id: 0, prefix: , title: 'Doe John', label: 'Doe John', }), listItemSelectBuilder({ id: 1, prefix: , title: 'John Doe', label: 'John Doe', }), listItemActionBuilder({ title: 'New Author', prefixIcon: , }), ]; const handleSelectTag = (tag, previousTags, setTags) => setTags([...previousTags, { id: tag.id, label: tag.value }]); const handleRemoveTag = (tag, previousTags, setTags) => setTags(previousTags.filter((currTag) => currTag.id !== tag)); const renderSettingsPanel = () => ( {}}> setActiveTab(value.id)} /> {activeTab === 0 && ( setToggleImage(!toggleImage)} /> {toggleImage && ( )} setPublishDate(date)} /> setAuthor(option.label)} onChange={(event) => setAuthor(event.target.value)} /> setTogglePosts(!togglePosts)} /> )} {activeTab === 1 && ( setDescriptionValue(e.target.value)} maxLength={140} hasCounter /> }> Add Posts } onSelect={(tag) => handleSelectTag(tag, authorTags, setAuthorTags) } onRemoveTag={(tag) => handleRemoveTag(tag, authorTags, setAuthorTags) } /> setToggleCommenting(!toggleCommenting)} /> )} ); return ( {selectedSidebar === 0 && renderSettingsPanel()} Composer content area ); }; ```