@gitlab/ui/dist/components/base/button/examples/index.js

GitLab UI Components

import ButtonBasicExample from './basic/button.basic.example';
import ButtonDisabledExample from './basic/button.disabled.example';
import ButtonLinkExample from './basic/button.link.example';
import ButtonSelectedExample from './basic/button.selected.example';
import ButtonPrimaryExample from './categories/button.primary.example';
import ButtonSecondaryExample from './categories/button.secondary.example';
import ButtonTertiaryExample from './categories/button.tertiary.example';
import ButtonEllipsisExample from './combinations/button.ellipsis.example';
import ButtonEmojiExample from './combinations/button.emoji.example';
import ButtonIconExample from './combinations/button.icon.example';
import ButtonIconAndTextExample from './combinations/button.icon_and_text.example';
import ButtonLabelExample from './combinations/button.label.example';
import ButtonLoadingExample from './combinations/button.loading.example';
import ButtonInfoExample from './deprecated-variants/button.info.example';
import ButtonSuccessExample from './deprecated-variants/button.success.example';
import ButtonWarningExample from './deprecated-variants/button.warning.example';
import ButtonDropdownExample from './dropdowns/button.dropdown.example';
import ButtonDropdownFullWidthExample from './dropdowns/button.dropdown_full_width.example';
import ButtonDropdownSplitExample from './dropdowns/button.dropdown_split.example';
import ButtonDropdownWithIconExample from './dropdowns/button.dropdown_with_icon.example';
import ButtonDropdownWithIconAndSplitExample from './dropdowns/button.dropdown_with_icon_and_split.example';
import ButtonDropdownWithIconAndTextExample from './dropdowns/button.dropdown_with_icon_and_text.example';
import ButtonFullWidthExample from './sizing/button.full_width.example';
import ButtonMediumExample from './sizing/button.medium.example';
import ButtonSizesExample from './sizing/button.sizes.example';
import ButtonSmallExample from './sizing/button.small.example';
import ButtonConfirmExample from './variants/button.confirm.example';
import ButtonDangerExample from './variants/button.danger.example';
import ButtonDashedExample from './variants/button.dashed.example';
import ButtonVariantsExample from './variants/button.variants.example';

/* Basic */
var index = [{
  name: 'Basic',
  items: [{
    id: 'button-basic',
    name: 'Basic',
    description: 'Basic Button',
    component: ButtonBasicExample
  }, {
    id: 'button-selected',
    name: 'Selected',
    description: 'Selected button',
    component: ButtonSelectedExample
  }, {
    id: 'button-disabled',
    name: 'Disabled',
    description: 'Disabled button',
    component: ButtonDisabledExample
  }, {
    id: 'button-link',
    name: 'Button Link',
    description: 'Button with a link',
    component: ButtonLinkExample
  }]
}, {
  name: 'Categories',
  items: [{
    id: 'button-primary',
    name: 'Primary Category',
    description: 'Primary category button',
    component: ButtonPrimaryExample
  }, {
    id: 'button-secondary',
    name: 'Secondary Category',
    description: 'Secondary category button',
    component: ButtonSecondaryExample
  }, {
    id: 'button-tertiary',
    name: 'Tertiary Category',
    description: 'Tertiary category button',
    component: ButtonTertiaryExample
  }]
}, {
  name: 'Variants',
  items: [{
    id: 'button-variants',
    name: 'All Button Variants',
    description: 'All different button variants',
    component: ButtonVariantsExample
  }, {
    id: 'button-confirm',
    name: 'Confirm Button Variant',
    description: 'Confirm button variant',
    component: ButtonConfirmExample
  }, {
    id: 'button-danger',
    name: 'Danger Button Variant',
    description: 'Danger button variant',
    component: ButtonDangerExample
  }, {
    id: 'button-dashed',
    name: 'Dashed Button Variant',
    description: 'Dashed button variant',
    component: ButtonDashedExample
  }]
}, {
  name: 'Deprecated variants',
  items: [{
    id: 'button-info',
    name: 'Info Button Variant (Deprecated)',
    description: 'Info button variant (Deprecated)',
    component: ButtonInfoExample
  }, {
    id: 'button-success',
    name: 'Success Button Variant (Deprecated)',
    description: 'Success button variant (Deprecated)',
    component: ButtonSuccessExample
  }, {
    id: 'button-warning',
    name: 'Warning Button Variant (Deprecated)',
    description: 'Warning button variant (Deprecated)',
    component: ButtonWarningExample
  }]
}, {
  name: 'Combinations',
  items: [{
    id: 'button-emoji',
    name: 'Emoji button',
    description: 'Button with an emoji and text inside',
    component: ButtonEmojiExample
  }, {
    id: 'button-icon',
    name: 'Icon button',
    description: 'Button with only an icon inside',
    component: ButtonIconExample
  }, {
    id: 'button-icon-and-text',
    name: 'Icon and text button',
    description: 'Button with an icon and text inside',
    component: ButtonIconAndTextExample
  }, {
    id: 'button-ellipsis',
    name: 'Ellipsis button',
    description: 'Button with an ellipsis inside',
    component: ButtonEllipsisExample
  }, {
    id: 'button-label',
    name: 'Label button',
    description: 'Button used as a label - normally in a button group',
    component: ButtonLabelExample
  }, {
    id: 'button-loading',
    name: 'Loading button',
    description: 'Button that is showing a loading spinner',
    component: ButtonLoadingExample
  }]
}, {
  name: 'Sizing',
  items: [{
    id: 'button-sizes',
    name: 'Button Sizes',
    description: 'All button sizes',
    component: ButtonSizesExample
  }, {
    id: 'button-medium',
    name: 'Medium Button Size',
    description: 'Medium button size',
    component: ButtonMediumExample
  }, {
    id: 'button-small',
    name: 'Small Button Size',
    description: 'Small button size',
    component: ButtonSmallExample
  }, {
    id: 'button-full-width',
    name: 'Full Width Button Size',
    description: 'Full width button size',
    component: ButtonFullWidthExample
  }]
}, {
  name: 'Dropdowns',
  items: [{
    id: 'new-dropdown',
    name: 'Default',
    description: 'Dropdown',
    component: ButtonDropdownExample
  }, {
    id: 'new-dropdown-split',
    name: 'Split',
    description: 'Split Dropdown',
    component: ButtonDropdownSplitExample
  }, {
    id: 'new-dropdown-with-icon',
    name: 'With Icon',
    description: 'Icon Dropdown',
    component: ButtonDropdownWithIconExample
  }, {
    id: 'new-dropdown-with-icon-and-text',
    name: 'With Icon and Text',
    description: 'Icon Dropdown with text',
    component: ButtonDropdownWithIconAndTextExample
  }, {
    id: 'new-dropdown-with-icon-and-split',
    name: 'With Icon and Split',
    description: 'Icon Dropdown with split',
    component: ButtonDropdownWithIconAndSplitExample
  }, {
    id: 'new-dropdown-full-width',
    name: 'Full Width',
    description: 'Full Width Dropdown',
    component: ButtonDropdownFullWidthExample
  }]
}];

export default index;