Segmented Control React Component

Segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).

Contents

Segmented Components

There are following components included:

  • Segmented - segmented wrapper for buttons
  • SegmentedButton - single segmented button

Segmented Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.borderIosstring'border-primary'
colors.borderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.divideIosstring'divide-primary'
colors.divideMaterialstring'divide-md-light-outline dark:divide-md-dark-outline'
colors.strongBgIosstring'bg-black/5 dark:bg-white/10'
colors.strongBgMaterialstring'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.strongHighlightBgIosstring'bg-white dark:bg-white/75'
colors.strongHighlightBgMaterialstring'bg-white dark:bg-white/15'
componentstring'div'

Component's HTML Element

outlinebooleanfalse

Makes segmented outline

outlineIosbooleanfalse

Makes segmented outline in iOS theme

outlineMaterialbooleanfalse

Makes segmented outline in Material theme

raisedbooleanfalse

Makes segmented raised

raisedIosbooleanfalse

Makes segmented raised in iOS theme

raisedMaterialbooleanfalse

Makes segmented raised in Material theme

roundedbooleanfalse

Makes segmented rounded

roundedIosbooleanfalse

Makes segmented rounded in iOS theme

roundedMaterialbooleanfalse

Makes segmented rounded in Material theme

strongbooleanfalse

Makes segmented strong

strongIosbooleanfalse

Makes segmented strong in iOS theme

strongMaterialbooleanfalse

Makes segmented strong in Material theme

SegmentedButton Props

SegmentedButton component extends Button component, it supports all Button props and the following additional props:

NameTypeDefaultDescription
activebooleanfalse

Highlights button as active

componentstring'button'

Component's HTML Element

Examples

SegmentedControl.jsx
import React, { useState } from 'react';


import {
  Page,
  Navbar,
  NavbarBackLink,
  Segmented,
  SegmentedButton,
  Block,
  BlockTitle,
} from 'konsta/react';


export default function SegmentedControlPage() {
  const [activeSegmented, setActiveSegmented] = useState(1);
  return (
    <Page>
      <Navbar
        title="Segmented Control"
        />


      <BlockTitle>Default Segmented</BlockTitle>
      <Block strong inset className="space-y-4">
        <Segmented>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>


        <Segmented rounded>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>
      </Block>


      <BlockTitle>Raised Segmented</BlockTitle>
      <Block strong inset className="space-y-4">
        <Segmented raised>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>
        <Segmented raised rounded>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>
      </Block>


      <BlockTitle>Outline</BlockTitle>
      <Block strong inset className="space-y-4">
        <Segmented outline>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>
        <Segmented rounded outline>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>
      </Block>


      <BlockTitle>Strong Segmented</BlockTitle>
      <Block strong inset className="space-y-4">
        <Segmented strong>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>


        <Segmented strong rounded>
          <SegmentedButton
            active={activeSegmented === 1}
            onClick={() => setActiveSegmented(1)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 2}
            onClick={() => setActiveSegmented(2)}
          >
            Button
          </SegmentedButton>
          <SegmentedButton
            active={activeSegmented === 3}
            onClick={() => setActiveSegmented(3)}
          >
            Button
          </SegmentedButton>
        </Segmented>
      </Block>
    </Page>
  );
}
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.