Button

import React from 'react'
import { Button } from '../../'

const ButtonDefault = (props) => (
  <div>
    <Button
        marginRight="xl"
        onClick={() => alert('button clicked!')}
        text="Button Primary"
        {...props}
    />
    {' '}
    <Button
        onClick={() => alert('button clicked!')}
        text="Button Secondary"
        variant="secondary"
        {...props}
    />
    {' '}
    <Button
        onClick={() => alert('button clicked!')}
        text="Button Link"
        variant="link"
        {...props}
    />
    <Button
        disabled
        onClick={() => alert('button clicked!')}
        text="Button Disabled"
        {...props}
    />
  </div>
)

export default ButtonDefault

import React from 'react'
import { Button } from '../../'

const ButtonFullWidth = (props) => (
  <div>
    <Button
        fullWidth
        text="Button Full Width"
        {...props}
    />
  </div>
)

export default ButtonFullWidth

import React from 'react'
import { Button } from '../../'

const ButtonLink = (props) => (
  <div>
    <Button
        aria={{ label: 'Link to Google' }}
        link="https://google.com"
        text="A Tag Button"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Link to Google in new window' }}
        link="https://google.com"
        newWindow
        text="Open in New Window"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Disabled link to Google' }}
        disabled
        link="https://google.com"
        text="A Tag Button Disabled"
        {...props}
    />
  </div>
)

export default ButtonLink

import React from 'react'
import { Button } from '../../'

const ButtonLoading = (props) => (
  <div>
    <Button
        aria={{ label: 'Loading' }}
        loading
        text="Button Primary"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Loading' }}
        loading
        text="Button Secondary"
        variant="secondary"
        {...props}
    />
    {' '}
    <Button
        aria={{ label: 'Loading' }}
        loading
        text="A Tag Button Disabled"
        variant="link"
        {...props}
    />
  </div>
)

export default ButtonLoading

import React from 'react'
import { Button } from '../../'

const ButtonBlockContent = (props) => (
  <div>
    <Button
        fixedWidth
        icon="users"
        text="Button with Block Content"
        {...props}
    />
  </div>
)

export default ButtonBlockContent

import React from 'react'
import { Button } from '../../'

const ButtonAccessibility = (props) => (
  <div>
    <Button
        aria={{ label: 'Go to Google' }}
        link="https://google.com"
        tag="a"
        text="Button with ARIA"
        {...props}
    />
  </div>
)

export default ButtonAccessibility

import React from 'react'
import Button from '../_button.jsx'

const ButtonOptions = (props) => (
  <div>
    <Button
        htmlType="submit"
        onClick={() => alert('Click!')}
        text="Button with options"
        value="1234"
        {...props}
    />
  </div>
)

export default ButtonOptions