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

Property	Type	Default	Description
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.
children	Button[]	-	Button elements.

Storybook

Live examples coming soon via Storybook.