ButtonGroup allows you to group related buttons together with connected styling. The component automatically handles spacing, borders, and corner radius for grouped buttons.
import { ButtonGroup, Button } from '@ui-kitten/components';
import React from 'react';
import { ButtonGroup, Button } from '@ui-kitten/components';
export const ButtonGroupExample = () => (
<ButtonGroup>
<Button>LEFT</Button>
<Button>MIDDLE</Button>
<Button>RIGHT</Button>
</ButtonGroup>
);
Appearances
ButtonGroup appearance is applied to all child buttons.
<ButtonGroup appearance='filled'>
<Button>ONE</Button>
<Button>TWO</Button>
<Button>THREE</Button>
</ButtonGroup>
<ButtonGroup status='primary'>
<Button>ONE</Button>
<Button>TWO</Button>
<Button>THREE</Button>
</ButtonGroup>
<ButtonGroup status='success'>
<Button>ONE</Button>
<Button>TWO</Button>
<Button>THREE</Button>
</ButtonGroup>
<ButtonGroup status='danger'>
<Button>ONE</Button>
<Button>TWO</Button>
<Button>THREE</Button>
</ButtonGroup>
<ButtonGroup size='small'>
<Button>SMALL</Button>
<Button>SMALL</Button>
</ButtonGroup>
<ButtonGroup size='medium'>
<Button>MEDIUM</Button>
<Button>MEDIUM</Button>
</ButtonGroup>
<ButtonGroup size='large'>
<Button>LARGE</Button>
<Button>LARGE</Button>
</ButtonGroup>
With Icons
Buttons within a group can display icons using accessories.
import { ButtonGroup, Button, Icon } from '@ui-kitten/components';
const PlusIcon = (props) => <Icon {...props} name='plus' />;
const MinusIcon = (props) => <Icon {...props} name='minus' />;
const CloseIcon = (props) => <Icon {...props} name='close' />;
export const ButtonGroupWithIcons = () => (
<ButtonGroup>
<Button accessoryLeft={PlusIcon} />
<Button accessoryLeft={MinusIcon} />
<Button accessoryLeft={CloseIcon} />
</ButtonGroup>
);
children
ChildrenWithProps<ButtonProps>
required
Buttons to be rendered within the group. Should be Button components.
appearance
'filled' | 'outline' | 'ghost'
default:"filled"
Appearance applied to all child buttons.
status
EvaStatus
default:"primary"
Status applied to all child buttons. Can be basic, primary, success, info, warning, danger or control.
Size applied to all child buttons. Can be tiny, small, medium, large, or giant.
Customizes the style of the button group container.
Form Examples
Segmented Control
import React from 'react';
import { ButtonGroup, Button } from '@ui-kitten/components';
const SegmentedControl = () => {
const [selected, setSelected] = React.useState(0);
return (
<ButtonGroup>
<Button
appearance={selected === 0 ? 'filled' : 'outline'}
onPress={() => setSelected(0)}
>
DAILY
</Button>
<Button
appearance={selected === 1 ? 'filled' : 'outline'}
onPress={() => setSelected(1)}
>
WEEKLY
</Button>
<Button
appearance={selected === 2 ? 'filled' : 'outline'}
onPress={() => setSelected(2)}
>
MONTHLY
</Button>
</ButtonGroup>
);
};
Quantity Selector
import React from 'react';
import { ButtonGroup, Button, Text } from '@ui-kitten/components';
const QuantitySelector = () => {
const [quantity, setQuantity] = React.useState(1);
return (
<ButtonGroup>
<Button
onPress={() => setQuantity(q => Math.max(1, q - 1))}
disabled={quantity <= 1}
>
-
</Button>
<Button disabled>
<Text>{quantity}</Text>
</Button>
<Button onPress={() => setQuantity(q => q + 1)}>
+
</Button>
</ButtonGroup>
);
};
Filter Buttons
import React from 'react';
import { ButtonGroup, Button } from '@ui-kitten/components';
const FilterButtons = () => {
const [filter, setFilter] = React.useState('all');
return (
<ButtonGroup appearance='outline' size='small'>
<Button
status={filter === 'all' ? 'primary' : 'basic'}
onPress={() => setFilter('all')}
>
ALL
</Button>
<Button
status={filter === 'active' ? 'primary' : 'basic'}
onPress={() => setFilter('active')}
>
ACTIVE
</Button>
<Button
status={filter === 'completed' ? 'primary' : 'basic'}
onPress={() => setFilter('completed')}
>
COMPLETED
</Button>
</ButtonGroup>
);
};
