🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

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).

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 bg-opacity-5 dark:bg-white dark:bg-opacity-10'
colors.strongBgMaterialstring'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
componentstring'div'

Component's HTML Element

outlinebooleanfalse

Makes segmented outline

raisedbooleanfalse

Makes segmented raised

roundedbooleanfalse

Makes segmented rounded

strongbooleanfalse

Makes segmented strong

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

roundedbooleanfalse

Makes segmented button rounded (should be used within <Segmented rounded>)

strongbooleanfalse

Makes strong segmented button (should be used within <Segmented strong>)

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 strongIos outlineIos 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 strongIos outlineIos 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 strongIos outlineIos 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 strongIos outlineIos className="space-y-4">
<Segmented strong>
<SegmentedButton
strong
active={activeSegmented === 1}
onClick={() => setActiveSegmented(1)}
>
Button
</SegmentedButton>
<SegmentedButton
strong
active={activeSegmented === 2}
onClick={() => setActiveSegmented(2)}
>
Button
</SegmentedButton>
<SegmentedButton
strong
active={activeSegmented === 3}
onClick={() => setActiveSegmented(3)}
>
Button
</SegmentedButton>
</Segmented>
<Segmented strong rounded>
<SegmentedButton
strong
rounded
active={activeSegmented === 1}
onClick={() => setActiveSegmented(1)}
>
Button
</SegmentedButton>
<SegmentedButton
strong
rounded
active={activeSegmented === 2}
onClick={() => setActiveSegmented(2)}
>
Button
</SegmentedButton>
<SegmentedButton
strong
rounded
active={activeSegmented === 3}
onClick={() => setActiveSegmented(3)}
>
Button
</SegmentedButton>
</Segmented>
</Block>
</Page>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.