Glowup
ACTIONS · 21 / 89
ButtonGroup
ButtonGroup — a Material You actions component for React Native and web.
󱀫
packages/ui/src/components/ButtonGroup.tsx
Live demo
Properties
4 controls
Type
Standard
󰍝
Unselected look
Tonal
󰍝
Size
Small
󰍝
Multi select
Usage
ButtonGroup.tsx
<ButtonGroup />
Variants
The states and shapes this component is meant to be used in.
Standard
Separate buttons; the selected one squares its corners.
Connected
One control — the successor of segmented buttons.
Multi select, outlined
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
10 on ButtonGroupProps
Filter props
󰍉
onValueChange
required
(value: any) => void
options
required
ButtonGroupOption[]
value
required
string | string[]
The selected value, or the selected values with `multiSelect`.
accessibilityLabel
string
Names the group for assistive tech.
mode
"tonal" | "outlined"
default: "tonal"
Look of the unselected buttons; selected ones are filled. Defaults to `"tonal"`.
multiSelect
boolean
default: false
size
keyof typeof HEIGHTS
default: "s"
Defaults to `"s"` (40dp).
style
StyleProp<ViewStyle>
testID
string
type
"standard" | "connected"
default: "standard"
`"standard"` spaces the buttons apart; `"connected"` joins them into one control (the successor of segmented buttons). Defaults to `"standard"`.
󰅁
Previous
ToggleButtonGroup
Next
SplitButton
󰅂