File Editor
Directories:
.. (Back)
input
ripple
Files:
button-group.stories.js
button.stories.js
categories.stories.js
codemirror.stories.js
color.stories.js
range.stories.js
select-advanced.stories.js
select-menu.stories.js
tags.stories.js
toggle.stories.js
Create New File
Create
Edit File: button-group.stories.js
// External dependencies. import React from 'react'; // Internal dependencies. import Button from '@common-ui/controls/button/button'; import ETCommonButtonGroup from '@common-ui/controls/button-group/button-group'; const Buttons = ( <> <Button className='et-common-button et-common-button--primary'>Button 1</Button> <Button className='et-common-button et-common-button--danger'>Button 2</Button> <Button className='et-common-button et-common-button--success'>Button 3</Button> <Button className='et-common-button et-common-button--tertiary'>Button 4</Button> </> ); export default { title: 'Controls/Button Group', component: ETCommonButtonGroup, argTypes: { onClick: { action: 'clicked', table: { disable: true, }, }, }, args: { children: Buttons, style: { padding: '10px', }, }, }; export const Horizontal = {}; export const Vertical = { args: { vertical: true, }, }; export const Block = { args: { block: true, }, }; export const Danger = { args: { danger: true, }, }; export const Elevate = { args: { elevate: true, }, }; export const Info = { args: { info: true, }, }; export const Inverse = { args: { inverse: true, }, }; export const Primary = { args: { primary: true, }, }; export const Success = { args: { success: true, }, }; export const Warning = { args: { warning: true, }, }; export const WithCustomStyle = { args: { style: { backgroundColor: 'lightblue' }, }, }; export const WithOnClick = { args: { onClick: () => alert('Button group clicked!'), }, };
Save Changes
Rename File
Rename