{"size": 1816, "ext": "js", "max_stars_repo_path": "core/components/atoms/button/stories/dark-background.story.js", "max_stars_repo_name": "kuldeepkeshwar/cosmos", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "core/components/atoms/button/stories/dark-background.story.js", "max_issues_repo_name": "kuldeepkeshwar/cosmos", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "core/components/atoms/button/stories/dark-background.story.js", "max_forks_repo_name": "kuldeepkeshwar/cosmos", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.5151515152, "max_line_length": 69, "alphanum_fraction": 0.5666299559}
import React from 'react'
import { storiesOf } from '@storybook/react'
import { Example, Stack } from '@auth0/cosmos/_helpers/story-helpers'

import { Button, ButtonGroup } from '@auth0/cosmos'

storiesOf('Button', module).add('dark background', () => (
  <Example title="Dark background" background="dark">
    <div>
      <Stack>
        <Button>Button</Button>
        <Button appearance="primary">Primary</Button>
        <Button appearance="secondary">Secondary</Button>
        <Button appearance="link">Link</Button>
        <Button appearance="destructive">Destructive</Button>
      </Stack>
    </div>
    <br />
    <div>
      <Stack>
        <Button disabled>Button</Button>
        <Button disabled appearance="primary">
          Primary
        </Button>
        <Button disabled appearance="secondary">
          Secondary
        </Button>
        <Button disabled appearance="link">
          Link
        </Button>
        <Button disabled appearance="destructive">
          Destructive
        </Button>
      </Stack>
    </div>
    <br />
    <div>
      <Stack>
        <Button loading>Button</Button>
        <Button loading appearance="primary">
          Primary
        </Button>
        <Button loading appearance="secondary">
          Secondary
        </Button>
        <Button loading appearance="link">
          Link
        </Button>
        <Button loading appearance="destructive">
          Destructive
        </Button>
      </Stack>
    </div>
    <br />
    <div>
      <Stack>
        <Button icon="delete" />
        <Button appearance="primary" icon="delete" />
        <Button appearance="link" icon="delete" />
        <Button appearance="secondary" icon="delete" />
        <Button appearance="destructive" icon="delete" />
      </Stack>
    </div>
  </Example>
))
