Button Group

A Button Group component groups multiple buttons together for selecting from a set of related actions or options.

Demo

Demo Coming Soon

ButtonGroup examples will be available soon.

Usage

import { useState } from 'react';
import { NButtonGroup } from '@nayan-ui/react';


const items = ['Startup', 'Business', 'Enterprise'];


const ButtonGroup = () => {
  const [selected, setSelected] = useState(items[0]);
  return <NButtonGroup disabled={false} items={items} selected={selected} onChange={setSelected} />;
};


export default ButtonGroup;

Attributes

NameTypeDefaultDetails
itemsButtonGroupItem[]RequiredArray of items with label, value, optional icon and isDisabled.
valuestringRequiredCurrently selected value.
onValueChange(value: string) => voidRequiredCallback when selection changes.
labelstringOptionalLabel for the button group.
isDisabledbooleanfalseWhether the button group is disabled.
classNamestring' 'You can customise by passing tailwind classes.
buttonClassNamestring' 'You can customise by passing tailwind classes.
labelClassNamestring' 'You can customise by passing tailwind classes.

Tags

React Native Button GroupReact Native Toggle ButtonsReact Native Segmented ControlMobile Button Group React NativeReact Native Button Group ComponentReact Native Button Group LibraryReact Native Toggle GroupReact Native Radio Button GroupReact Native Tab ButtonsReact Native Switch ButtonsReact Native Toolbar ButtonsMobile Button Group ComponentCross Platform Button GroupExpo Button Group ComponentReact Native Button Group TutorialReact Native Button Group TypeScriptReact Native Button Group UI