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

GitLab UI Components

import ButtonBasicExample from './basic/new_button.basic.example';
import ButtonDisabledExample from './basic/new_button.disabled.example';
import ButtonLinkExample from './basic/new_button.link.example';
import ButtonSelectedExample from './basic/new_button.selected.example';
import ButtonTertiaryExample from './categories/new_button.tertiary.example';
import ButtonPrimaryExample from './categories/new_button.primary.example';
import ButtonSecondaryExample from './categories/new_button.secondary.example';
import ButtonDangerExample from './variants/new_button.danger.example';
import ButtonDashedExample from './variants/new_button.dashed.example';
import ButtonInfoExample from './variants/new_button.info.example';
import ButtonSuccessExample from './variants/new_button.success.example';
import ButtonVariantsExample from './variants/new_button.variants.example';
import ButtonWarningExample from './variants/new_button.warning.example';
import ButtonEllipsisExample from './combinations/new_button.ellipsis.example';
import ButtonEmojiExample from './combinations/new_button.emoji.example';
import ButtonIconExample from './combinations/new_button.icon.example';
import ButtonIconAndTextExample from './combinations/new_button.icon_and_text.example';
import ButtonLabelExample from './combinations/new_button.label.example';
import ButtonFullWidthExample from './sizing/new_button.full_width.example';
import ButtonMediumExample from './sizing/new_button.medium.example';
import ButtonSizesExample from './sizing/new_button.sizes.example';
import ButtonSmallExample from './sizing/new_button.small.example';

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

export default index;