Skip to main content

ButtonGroup

ButtonGroup renders a horizontal group of buttons that share the same appearance, status, and size. Buttons within the group are visually connected.

Import​

import { ButtonGroup, Button } from '@ui-kitten/components';

Basic Usage​

import React from 'react';
import { Layout, ButtonGroup, Button } from '@ui-kitten/components';

const ButtonGroupExample = () => (
  <Layout style={{ flex: 1, padding: 16, alignItems: 'center' }}>
    <ButtonGroup appearance="outline" status="primary" size="medium">
      <Button>Left</Button>
      <Button>Middle</Button>
      <Button>Right</Button>
    </ButtonGroup>
  </Layout>
);

Props​

PropertyTypeDefaultDescription
appearance'filled' | 'outline' | 'ghost''filled'Visual style applied to all buttons in the group.
status'primary' | 'success' | 'info' | 'warning' | 'danger' | 'basic' | 'control''primary'Semantic color applied to all buttons in the group.
size'tiny' | 'small' | 'medium' | 'large' | 'giant''medium'Size applied to all buttons in the group.
selectedIndexnumberundefinedIndex of the selected button. It renders filled (unless it sets its own appearance); the others keep the group appearance, so use it with appearance="outline" or "ghost". Each button reports its selected state to screen readers.
onSelect(index: number) => voidundefinedCalled with the index of the pressed button, after that button's own onPress.
childrenButton[]-Button elements. appearance, status and size set on a child win over the group's.

Toggle​

Combine selectedIndex and onSelect for a segmented toggle. Give the group an outline or ghost appearance: the selected button fills, and in a filled group it would look like the others. Screen readers announce the selected button as selected.

const [selectedIndex, setSelectedIndex] = React.useState(0);

<ButtonGroup appearance="outline" selectedIndex={selectedIndex} onSelect={setSelectedIndex}>
  <Button>Day</Button>
  <Button>Week</Button>
  <Button>Month</Button>
</ButtonGroup>

Storybook​

Live examples coming soon via Storybook.