@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 ButtonTertiaryExample from './categories/button.tertiary.example';
import ButtonPrimaryExample from './categories/button.primary.example';
import ButtonSecondaryExample from './categories/button.secondary.example';
import ButtonDangerExample from './variants/button.danger.example';
import ButtonDashedExample from './variants/button.dashed.example';
import ButtonInfoExample from './variants/button.info.example';
import ButtonSuccessExample from './variants/button.success.example';
import ButtonVariantsExample from './variants/button.variants.example';
import ButtonWarningExample from './variants/button.warning.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 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';

/* 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-info',
    name: 'Info Button Variant',
    description: 'Info button variant',
    component: ButtonInfoExample
  }, {
    id: 'button-success',
    name: 'Success Button Variant',
    description: 'Success button variant',
    component: ButtonSuccessExample
  }, {
    id: 'button-warning',
    name: 'Warning Button Variant',
    description: 'Warning button variant',
    component: ButtonWarningExample
  }, {
    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: '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
  }]
}];

export default index;