Skip to main content

SegmentedButton

Button group component to select one or multiple options. Each unit Button just extends the Button component. Supports icons, multi-select, custom modes, sizes, statuses, and full styling customization.

Following values will be used on the following demos:

const buttons: ControlButtonProps[] = [
  { title: "Primary" },
  { title: "Secondary" },
  { title: "Tertiary" },
];

const iconButtons: ControlButtonProps[] = [
  { title: "Primary", left: <Icon name="add" /> },
  { title: "Secondary", left: <Icon name="add" /> },
  { title: "Tertiary", left: <Icon name="add" /> },
];

Usage​

Primary
Secondary
Tertiary
function SegmentedButtonUsage() {
  return <SegmentedButton data={buttons} />
}

Icons​

Use the left or right prop in the data to display icons along with text in each segment.

Primary
Secondary
Tertiary
function SegmentedButtonIcons() {
  return (
    <View>
      <SegmentedButton data={iconButtons} />
    </View>
  )
}

MultiSelect​

Enable multiSelect prop to allow selecting multiple segments at once.

Primary
Secondary
Tertiary
function SegmentedButtonMultiSelect() {
  return <SegmentedButton data={buttons} multiSelect />
}

Status​

Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
function SegmentedButtonStatuses() {
  return (
    <>
      <SegmentedButton data={buttons} mode="filled" status="primary" />
      <SegmentedButton data={buttons} mode="filled" status="accent" />
      <SegmentedButton data={buttons} mode="filled" status="success" />
      <SegmentedButton data={buttons} mode="filled" status="info" />
      <SegmentedButton data={buttons} mode="filled" status="warning" />
      <SegmentedButton data={buttons} mode="filled" status="error" />
    </>
  )
}

Size​

Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
function SegmentedButtonSizes() {
  return (
    <View>
      <SegmentedButton data={buttons} size="small" />
      <SegmentedButton data={buttons} size="medium" />
      <SegmentedButton data={buttons} size="large" />
    </View>
  )
}

Modes​

Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
Primary
Secondary
Tertiary
function SegmentedButtonModes() {
  return (
    <View>
      <SegmentedButton data={buttons} mode="filled" />
      <SegmentedButton data={buttons} mode="tinted" />
      <SegmentedButton data={buttons} mode="outlined" />
      <SegmentedButton data={buttons} mode="plain" />
    </View>
  )
}

Disabled​

Use the disabled prop to make segments non-interactive.

Primary
Secondary
Tertiary
function SegmentedButtonDisabled() {
  return <SegmentedButton data={buttons} disabled />
}

Custom​

Primary
Secondary
Tertiary
function SegmentedButtonCustom() {
  return (
    <View>
      <SegmentedButton
        data={buttons}
        style={[{backgroundColor: 'cyan'}]}
        activeColor="cyan"
        inactiveColor="burlywood"
      />
    </View>
  )
}

Props​

PropData TypeDefault ValueDescription
ExtendsBaseUIProps--Inherits properties from BaseUIProps
dataControlButtonProps[]--List of props for control buttons
modeButtonMode--Mode of the button view
fullWidthboolean--Take the full width available
borderRadiusnumber--Control the border radius of the edge buttons
withVerticalDividerboolean--Show the vertical divider between the buttons
multiSelectboolean--Set to true for multiple select
activeColorstring--active color when the button is selected
inactiveColorstring--inactive color when the button is unselected
styleStyleProp<ViewStyle>--Container style
disabledboolean--Disable the whole control
onPress(value: string, selectedIndex: number) => void--OnPress callback with value
statusBlossomStatusprimary--
sizeBlossomSizemedium--