SegmentedButton

SegmentedButton component with Pressable as container, and supports full customization with different props. It has both hover and press effect that get picked from the color shades or if custom color is provided it auto generates those colors.

Usage

Primary

Secondary

Tertiary

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

SegmentedButtonIcons



Primary



Secondary



Tertiary

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

SegmentedButtonMultiSelect

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

Primary

Secondary

Tertiary

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

Custom SegmentedButtons

Primary

Secondary

Tertiary

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

Props

Prop	Data Type	Default Value	Description
Extends	BaseUIProps	--	Inherits properties from BaseUIProps
data	ControlButtonProps[]	--	List of props for control buttons
mode	ButtonMode	--	Mode of the button view
fullWidth	boolean	--	Take the full width available
borderRadius	number	--	Control the border radius of the edge buttons
withVerticalDivider	boolean	--	Show the vertical divider between the buttons
multiSelect	boolean	--	Set to true for multiple select
activeColor	string	--	active color when the button is selected
inactiveColor	string	--	inactive color when the button is unselected
style	StyleProp<ViewStyle>	--	Container style
disabled	boolean	--	Disable the whole control
onPress	(value: string, selectedIndex: number) => void	--	OnPress callback with value
status	BlossomStatus	primary	--
size	BlossomSize	medium	--