How to use ButtonGroup method in storybook-root

Best JavaScript code snippet using storybook-root

ButtonGroupExamplesPage.js

Source:ButtonGroupExamplesPage.js

1import React from "react";2import {3  Button,4  ButtonGroup,5  ButtonToolbar,6  InputGroup,7  FormControl,8  Dropdown,9  DropdownButton10} from "react-bootstrap";11import {Notice, KTCodeExample} from "../../../_metronic/_partials/controls";1213export default class ButtonGroupExamplesPage extends React.Component {14  render() {15    return (16      <>17        <Notice icon="flaticon-warning font-primary">18          <span>19            Group a series of buttons together on a single line with the button20            group.21          </span>{" "}22          <span>23            For more info please check the components's official{" "}24            <a25              target="_blank"26              className="font-weight-bold"27              rel="noopener noreferrer"28              href="https://react-bootstrap.github.io/components/button-group/"29            >30              demos & documentation31            </a>32          </span>33        </Notice>3435        <div className="row">36          <div className="col-md-6">37            <KTCodeExample jsCode={jsCode1} beforeCodeTitle="Basic example">38              <span>39                Wrap a series of <code>&lt;Button&gt;</code>s in a{" "}40                <code>&lt;ButtonGroup&gt;</code>.41              </span>42              <div className="separator separator-dashed my-7"></div>43              <ButtonGroup aria-label="Basic example">44                <Button variant="secondary">Left</Button>45                <Button variant="secondary">Middle</Button>46                <Button variant="secondary">Right</Button>47              </ButtonGroup>48            </KTCodeExample>4950            <KTCodeExample jsCode={jsCode3} beforeCodeTitle="Button Toolbar">51              <span>52                Feel free to mix input groups with button groups in your53                toolbars. Similar to the example above, youâll likely need some54                utilities though to space things properly.55              </span>56              <div className="separator separator-dashed my-7"></div>57              <div>58                <ButtonToolbar59                  className="mb-3"60                  aria-label="Toolbar with Button groups"61                >62                  <ButtonGroup className="mr-2" aria-label="First group">63                    <Button variant="secondary">1</Button>64                    <Button variant="secondary">2</Button>65                    <Button variant="secondary">3</Button>66                    <Button variant="secondary">4</Button>67                  </ButtonGroup>68                  <InputGroup>69                    <InputGroup.Prepend>70                      <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>71                    </InputGroup.Prepend>72                    <FormControl73                      type="text"74                      placeholder="Input group example"75                      aria-label="Input group example"76                      aria-describedby="btnGroupAddon"77                    />78                  </InputGroup>79                </ButtonToolbar>8081                <ButtonToolbar82                  className="justify-content-between"83                  aria-label="Toolbar with Button groups"84                >85                  <ButtonGroup aria-label="First group">86                    <Button variant="secondary">1</Button>87                    <Button variant="secondary">2</Button>88                    <Button variant="secondary">3</Button>89                    <Button variant="secondary">4</Button>90                  </ButtonGroup>91                  <InputGroup>92                    <InputGroup.Prepend>93                      <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>94                    </InputGroup.Prepend>95                    <FormControl96                      type="text"97                      placeholder="Input group example"98                      aria-label="Input group example"99                      aria-describedby="btnGroupAddon2"100                    />101                  </InputGroup>102                </ButtonToolbar>103              </div>104            </KTCodeExample>105106            <KTCodeExample jsCode={jsCode5} beforeCodeTitle="Nesting">107              <span>108                You can place other button types within the{" "}109                <code>&lt;ButtonGroup&gt;</code> like{" "}110                <code>&lt;DropdownButton&gt;</code>s.111              </span>112              <div className="separator separator-dashed my-7"></div>113              <ButtonGroup>114                <Button>1</Button>115                <Button>2</Button>116                <DropdownButton117                  as={ButtonGroup}118                  title="Dropdown"119                  id="bg-nested-dropdown"120                >121                  <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>122                  <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>123                </DropdownButton>124              </ButtonGroup>125            </KTCodeExample>126          </div>127          <div className="col-md-6">128            <KTCodeExample jsCode={jsCode2} beforeCodeTitle="Button toolbar">129              <span>130                Combine sets of <code>&lt;ButtonGroup&gt;</code>s into a{" "}131                <code>&lt;ButtonToolbar&gt;</code> for more complex components.132              </span>133              <div className="separator separator-dashed my-7"></div>134              <ButtonToolbar aria-label="Toolbar with button groups">135                <ButtonGroup className="mr-2" aria-label="First group">136                  <Button>1</Button>137                  <Button>2</Button>138                  <Button>3</Button>139                  <Button>4</Button>140                </ButtonGroup>141142                <ButtonGroup className="mr-2" aria-label="Second group">143                  <Button>5</Button>144                  <Button>6</Button>145                  <Button>7</Button>146                </ButtonGroup>147148                <ButtonGroup aria-label="Third group">149                  <Button>8</Button>150                </ButtonGroup>151              </ButtonToolbar>152            </KTCodeExample>153154            <KTCodeExample jsCode={jsCode4} beforeCodeTitle="Sizing">155              <span>156                Instead of applying button sizing props to every button in a157                group, just add <code>size</code> prop to the{" "}158                <code>&lt;ButtonGroup&gt;</code>.159              </span>160              <div className="separator separator-dashed my-7"></div>161              <div className="d-flex flex-column">162                <ButtonGroup size="lg">163                  <Button>Left</Button>164                  <Button>Middle</Button>165                  <Button>Right</Button>166                </ButtonGroup>167168                <ButtonGroup className="mt-3">169                  <Button>Left</Button>170                  <Button>Middle</Button>171                  <Button>Right</Button>172                </ButtonGroup>173                <ButtonGroup size="sm" className="mt-3">174                  <Button>Left</Button>175                  <Button>Middle</Button>176                  <Button>Right</Button>177                </ButtonGroup>178              </div>179            </KTCodeExample>180181            <KTCodeExample182              jsCode={jsCode6}183              beforeCodeTitle="Vertical variation"184            >185              <span>186                Make a set of buttons appear vertically stacked rather than187                horizontally, by adding <code>vertical</code> to the{" "}188                <code>&lt;ButtonGroup&gt;</code>. Split button dropdowns are not189                supported here.190              </span>191              <div className="separator separator-dashed my-7"></div>192              <ButtonGroup vertical>193                <Button>Button</Button>194                <Button>Button</Button>195                <DropdownButton196                  as={ButtonGroup}197                  title="Dropdown"198                  id="bg-vertical-dropdown-1"199                >200                  <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>201                  <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>202                </DropdownButton>203                <Button>Button</Button>204                <Button>Button</Button>205                <DropdownButton206                  as={ButtonGroup}207                  title="Dropdown"208                  id="bg-vertical-dropdown-2"209                >210                  <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>211                  <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>212                </DropdownButton>213                <DropdownButton214                  as={ButtonGroup}215                  title="Dropdown"216                  id="bg-vertical-dropdown-3"217                >218                  <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>219                  <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>220                </DropdownButton>221              </ButtonGroup>222            </KTCodeExample>223          </div>224        </div>225      </>226    );227  }228}229230const jsCode1 = `231<ButtonGroup aria-label="Basic example">232  <Button variant="secondary">Left</Button>233  <Button variant="secondary">Middle</Button>234  <Button variant="secondary">Right</Button>235</ButtonGroup>236`;237const jsCode2 = `238<ButtonToolbar aria-label="Toolbar with button groups">239  <ButtonGroup className="mr-2" aria-label="First group">240    <Button>1</Button>241    <Button>2</Button>242    <Button>3</Button>243    <Button>4</Button>244  </ButtonGroup>245246  <ButtonGroup className="mr-2" aria-label="Second group">247    <Button>5</Button>248    <Button>6</Button>249    <Button>7</Button>250  </ButtonGroup>251252  <ButtonGroup aria-label="Third group">253    <Button>8</Button>254  </ButtonGroup>255</ButtonToolbar>256`;257const jsCode3 = `258<div>259  <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">260    <ButtonGroup className="mr-2" aria-label="First group">261      <Button variant="secondary">1</Button>262      <Button variant="secondary">2</Button>263      <Button variant="secondary">3</Button>264      <Button variant="secondary">4</Button>265    </ButtonGroup>266    <InputGroup>267      <InputGroup.Prepend>268        <InputGroup.Text id="btnGroupAddon">@</InputGroup.Text>269      </InputGroup.Prepend>270      <FormControl271        type="text"272        placeholder="Input group example"273        aria-label="Input group example"274        aria-describedby="btnGroupAddon"275      />276    </InputGroup>277  </ButtonToolbar>278279  <ButtonToolbar280    className="justify-content-between"281    aria-label="Toolbar with Button groups"282  >283    <ButtonGroup aria-label="First group">284      <Button variant="secondary">1</Button>285      <Button variant="secondary">2</Button>286      <Button variant="secondary">3</Button>287      <Button variant="secondary">4</Button>288    </ButtonGroup>289    <InputGroup>290      <InputGroup.Prepend>291        <InputGroup.Text id="btnGroupAddon2">@</InputGroup.Text>292      </InputGroup.Prepend>293      <FormControl294        type="text"295        placeholder="Input group example"296        aria-label="Input group example"297        aria-describedby="btnGroupAddon2"298      />299    </InputGroup>300  </ButtonToolbar>301</div>302`;303const jsCode4 = `304<div className="d-flex flex-column">305  <ButtonGroup size="lg">306    <Button>Left</Button>307    <Button>Middle</Button>308    <Button>Right</Button>309  </ButtonGroup>310311  <ButtonGroup className="mt-3">312    <Button>Left</Button>313    <Button>Middle</Button>314    <Button>Right</Button>315  </ButtonGroup>316  <ButtonGroup size="sm" className="mt-3">317    <Button>Left</Button>318    <Button>Middle</Button>319    <Button>Right</Button>320  </ButtonGroup>321</div>322`;323const jsCode5 = `324<ButtonGroup>325  <Button>1</Button>326  <Button>2</Button>327  <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-nested-dropdown">328    <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>329    <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>330  </DropdownButton>331</ButtonGroup>332`;333const jsCode6 = `334<ButtonGroup vertical>335  <Button>Button</Button>336  <Button>Button</Button>337  <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-1">338    <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>339    <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>340  </DropdownButton>341  <Button>Button</Button>342  <Button>Button</Button>343  <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-2">344    <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>345    <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>346  </DropdownButton>347  <DropdownButton as={ButtonGroup} title="Dropdown" id="bg-vertical-dropdown-3">348    <Dropdown.Item eventKey="1">Dropdown link</Dropdown.Item>349    <Dropdown.Item eventKey="2">Dropdown link</Dropdown.Item>350  </DropdownButton>351</ButtonGroup>
...

ButtonGroups.js

Source:ButtonGroups.js

1// @mui2import { ButtonGroup, Button } from '@mui/material';3import { Masonry } from '@mui/lab';4//5import { Block } from '../../Block';6// ----------------------------------------------------------------------7const style = {8  display: 'flex',9  alignItems: 'center',10  justifyContent: 'center',11  flexWrap: 'wrap',12  '& > *': { m: '8px !important' },13};14export default function ButtonGroups() {15  return (16    <Masonry columns={2} spacing={3}>17      <Block title="Base" sx={style}>18        <ButtonGroup color="inherit">19          <Button>One</Button>20          <Button>Two</Button>21          <Button>Three</Button>22        </ButtonGroup>23        <ButtonGroup variant="contained" color="inherit">24          <Button>One</Button>25          <Button>Two</Button>26          <Button>Three</Button>27        </ButtonGroup>28        <ButtonGroup variant="text" color="inherit">29          <Button>One</Button>30          <Button>Two</Button>31          <Button>Three</Button>32        </ButtonGroup>33        <ButtonGroup>34          <Button>One</Button>35          <Button>Two</Button>36          <Button>Three</Button>37        </ButtonGroup>38        <ButtonGroup variant="contained">39          <Button>One</Button>40          <Button>Two</Button>41          <Button>Three</Button>42        </ButtonGroup>43        <ButtonGroup variant="text">44          <Button>One</Button>45          <Button>Two</Button>46          <Button>Three</Button>47        </ButtonGroup>48        <ButtonGroup disabled>49          <Button>One</Button>50          <Button>Two</Button>51          <Button>Three</Button>52        </ButtonGroup>53        <ButtonGroup disabled variant="contained">54          <Button>One</Button>55          <Button>Two</Button>56          <Button>Three</Button>57        </ButtonGroup>58        <ButtonGroup disabled variant="text">59          <Button>One</Button>60          <Button>Two</Button>61          <Button>Three</Button>62        </ButtonGroup>63      </Block>64      <Block title="Adding Colors" sx={style}>65        <ButtonGroup variant="contained" color="inherit">66          <Button>One</Button>67          <Button>Two</Button>68          <Button>Three</Button>69        </ButtonGroup>70        <ButtonGroup variant="contained">71          <Button>One</Button>72          <Button>Two</Button>73          <Button>Three</Button>74        </ButtonGroup>75        <ButtonGroup variant="contained" color="secondary">76          <Button>One</Button>77          <Button>Two</Button>78          <Button>Three</Button>79        </ButtonGroup>80        <ButtonGroup variant="contained" color="info">81          <Button>One</Button>82          <Button>Two</Button>83          <Button>Three</Button>84        </ButtonGroup>85        <ButtonGroup variant="contained" color="success">86          <Button>One</Button>87          <Button>Two</Button>88          <Button>Three</Button>89        </ButtonGroup>90        <ButtonGroup variant="contained" color="warning">91          <Button>One</Button>92          <Button>Two</Button>93          <Button>Three</Button>94        </ButtonGroup>95        <ButtonGroup variant="contained" color="error">96          <Button>One</Button>97          <Button>Two</Button>98          <Button>Three</Button>99        </ButtonGroup>100        <ButtonGroup variant="outlined" color="inherit">101          <Button>One</Button>102          <Button>Two</Button>103          <Button>Three</Button>104        </ButtonGroup>105        <ButtonGroup variant="outlined">106          <Button>One</Button>107          <Button>Two</Button>108          <Button>Three</Button>109        </ButtonGroup>110        <ButtonGroup variant="outlined" color="secondary">111          <Button>One</Button>112          <Button>Two</Button>113          <Button>Three</Button>114        </ButtonGroup>115        <ButtonGroup variant="outlined" color="info">116          <Button>One</Button>117          <Button>Two</Button>118          <Button>Three</Button>119        </ButtonGroup>120        <ButtonGroup variant="outlined" color="success">121          <Button>One</Button>122          <Button>Two</Button>123          <Button>Three</Button>124        </ButtonGroup>125        <ButtonGroup variant="outlined" color="warning">126          <Button>One</Button>127          <Button>Two</Button>128          <Button>Three</Button>129        </ButtonGroup>130        <ButtonGroup variant="outlined" color="error">131          <Button>One</Button>132          <Button>Two</Button>133          <Button>Three</Button>134        </ButtonGroup>135        <ButtonGroup variant="text" color="inherit">136          <Button>One</Button>137          <Button>Two</Button>138          <Button>Three</Button>139        </ButtonGroup>140        <ButtonGroup variant="text">141          <Button>One</Button>142          <Button>Two</Button>143          <Button>Three</Button>144        </ButtonGroup>145        <ButtonGroup variant="text" color="secondary">146          <Button>One</Button>147          <Button>Two</Button>148          <Button>Three</Button>149        </ButtonGroup>150        <ButtonGroup variant="text" color="info">151          <Button>One</Button>152          <Button>Two</Button>153          <Button>Three</Button>154        </ButtonGroup>155        <ButtonGroup variant="text" color="success">156          <Button>One</Button>157          <Button>Two</Button>158          <Button>Three</Button>159        </ButtonGroup>160        <ButtonGroup variant="text" color="warning">161          <Button>One</Button>162          <Button>Two</Button>163          <Button>Three</Button>164        </ButtonGroup>165        <ButtonGroup variant="text" color="error">166          <Button>One</Button>167          <Button>Two</Button>168          <Button>Three</Button>169        </ButtonGroup>170      </Block>171      <Block title="Size" sx={style}>172        <ButtonGroup size="small" variant="contained" color="info">173          <Button>One</Button>174          <Button>Two</Button>175          <Button>Three</Button>176        </ButtonGroup>177        <ButtonGroup variant="contained" color="info">178          <Button>One</Button>179          <Button>Two</Button>180          <Button>Three</Button>181        </ButtonGroup>182        <ButtonGroup size="large" variant="contained" color="info">183          <Button>One</Button>184          <Button>Two</Button>185          <Button>Three</Button>186        </ButtonGroup>187      </Block>188      <Block title="Orientation" sx={style}>189        <ButtonGroup orientation="vertical">190          <Button>One</Button>191          <Button>Two</Button>192          <Button>Three</Button>193        </ButtonGroup>194        <ButtonGroup orientation="vertical" variant="contained">195          <Button>One</Button>196          <Button>Two</Button>197          <Button>Three</Button>198        </ButtonGroup>199        <ButtonGroup orientation="vertical" variant="text">200          <Button>One</Button>201          <Button>Two</Button>202          <Button>Three</Button>203        </ButtonGroup>204      </Block>205    </Masonry>206  );...

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import ButtonGroup from './ButtonGroup';4storiesOf('ButtonGroup', module)5  .add('default', () => (6  ));7import React from 'react';8import Button from 'storybook-root/Button';9const ButtonGroup = () => (10);11export default ButtonGroup;12import React from 'react';13const Button = ({ children }) => (14  <button>{children}</button>15);16export default Button;17import { configure } from '@storybook/react';18function loadStories() {19  require('../src/stories');20}21configure(loadStories, module);22import React from 'react';23import { storiesOf } from '@storybook/react';24import { Button } from '@storybook/react/demo';25storiesOf('Button', module)26  .add('with text', () => (27    <Button onClick={action('clicked')}>Hello Button</Button>28  .add('with some emoji', () => (29    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>30  ));31import { configure } from '@storybook/react';32function loadStories() {33  require('../src/stories');34}35configure(loadStories, module);36import React

Using AI Code Generation

1import ButtonGroup from 'storybook-root/dist/ButtonGroup';2import Button from 'storybook-root/dist/Button';3import React from 'react';4import { storiesOf } from '@storybook/react';5import { action } from '@storybook/addon-actions';6storiesOf('ButtonGroup', module)7  .add('with text', () => (8      <Button onClick={action('clicked')}>Hello Button</Button>9      <Button onClick={action('clicked')}>Hello Button</Button>10      <Button onClick={action('clicked')}>Hello Button</Button>11  ));

Using AI Code Generation

1import { ButtonGroup } from 'storybook-root-decorator';2</ButtonGroup>;3import { addDecorator } from '@storybook/react';4import { withRootDecorator } from 'storybook-root-decorator';5addDecorator(withRootDecorator);6import { withRootDecorator } from 'storybook-root-decorator';7export const decorators = [withRootDecorator];8import { addons } from '@storybook/addons';9import { withRootDecorator } from 'storybook-root-decorator';10addons.setConfig({11  sidebar: {12  },13  previewTabs: {14    canvas: {15    },16    'storybook/docs/panel': {17    },18  },19  toolbar: {20    title: {21    },22    zoom: {23    },24    eject: {25    },26    copy: {27    },28    fullscreen: {29    },30    addons: {31    },32    search: {33    },34    'storybook/docs/panel': {35    },36  },37  sidebar: {38  },39  previewTabs: {40    canvas: {41    },42    'storybook/docs/panel': {43    },44  },45  toolbar: {46    title: {47    },48    zoom: {

Using AI Code Generation

1export const ButtonGroup = (args) => <button {...args} />;2ButtonGroup.args = {3};4  (Story) => (5    <div style={{ display: 'flex', gap: '1rem' }}>6];7import { addRootDecorator } from 'storybook-root-decorator';8addRootDecorator();9import { withRootDecorator } from 'storybook-root-decorator';10export const ButtonGroup = (args) => <button {...args} />;11ButtonGroup.args = {12};13  withRootDecorator((Story) => (14    <div style={{ display: 'flex', gap: '1rem' }}>15];

Using AI Code Generation

1import { ButtonGroup } from 'storybook-root';2{3  "compilerOptions": {4    "paths": {5    }6  },7}8{9  "compilerOptions": {

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.