Segmented Control Svelte 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'
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

onClickfunction(e)

Examples

SegmentedControl.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Segmented,
    SegmentedButton,
    Block,
    BlockTitle,
  } from 'konsta/svelte';


  let activeSegmented = 1;
</script>


<Page>
  <Navbar title="Segmented Control">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


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


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


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


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


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


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