Button

Variants

Set variants using variant prop. All colors defined in your theme (or not) can be used.

Default (primary)
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Custom color
No variant
import React from 'react'
import { Button, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Button>Default (primary)</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="info">Info</Button>
      <Button variant="light">Light</Button>
      <Button variant="dark">Dark</Button>
      <Button variant="#804FCE">Custom color</Button>
      <Button variant={null}>No variant</Button>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Button, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Button>Default (primary)</Button>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="warning">Warning</Button>
      <Button variant="info">Info</Button>
      <Button variant="light">Light</Button>
      <Button variant="dark">Dark</Button>
      <Button variant="#804FCE">Custom color</Button>
      <Button variant={null}>No variant</Button>
    </Boxer>
  )
}
render(<Example />)

Outline

Add outline prop to use the outline variant of buttons.

Default (primary)
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Custom color
No variant
import React from 'react'
import { Button, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Button outline>Default (primary)</Button>
      <Button outline variant="primary">
        Primary
      </Button>
      <Button outline variant="secondary">
        Secondary
      </Button>
      <Button outline variant="success">
        Success
      </Button>
      <Button outline variant="danger">
        Danger
      </Button>
      <Button outline variant="warning">
        Warning
      </Button>
      <Button outline variant="info">
        Info
      </Button>
      <Button outline variant="light">
        Light
      </Button>
      <Button outline variant="dark">
        Dark
      </Button>
      <Button outline variant="#804FCE">
        Custom color
      </Button>
      <Button outline variant={null}>
        No variant
      </Button>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Button, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Button outline>Default (primary)</Button>
      <Button outline variant="primary">
        Primary
      </Button>
      <Button outline variant="secondary">
        Secondary
      </Button>
      <Button outline variant="success">
        Success
      </Button>
      <Button outline variant="danger">
        Danger
      </Button>
      <Button outline variant="warning">
        Warning
      </Button>
      <Button outline variant="info">
        Info
      </Button>
      <Button outline variant="light">
        Light
      </Button>
      <Button outline variant="dark">
        Dark
      </Button>
      <Button outline variant="#804FCE">
        Custom color
      </Button>
      <Button outline variant={null}>
        No variant
      </Button>
    </Boxer>
  )
}
render(<Example />)

Scales

Set scales using scale prop like "xs", "sm", "lg" or "xl". The default scale is "base".

Extra small
Small
Default
Large
Extra large
import React from 'react'
import { Button, Boxer } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Boxer my={10}>
      <Button scale="xs">Extra small</Button>
      <Button scale="sm">Small</Button>
      <Button scale="base">Default</Button>
      <Button scale="lg">Large</Button>
      <Button scale="xl">Extra large</Button>
    </Boxer>
  )
}

render(<Example />)
import React from 'react'
import { Button, Boxer } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Boxer my={10}>
      <Button scale="xs">Extra small</Button>
      <Button scale="sm">Small</Button>
      <Button scale="base">Default</Button>
      <Button scale="lg">Large</Button>
      <Button scale="xl">Extra large</Button>
    </Boxer>
  )
}
render(<Example />)

Disabled

Disable using disabled prop.

Disabled
import React from 'react'
import { Button } from '@smooth-ui/core-sc'

function Example() {
  return (
    <Button variant="primary" disabled>
      Disabled
    </Button>
  )
}

render(<Example />)
import React from 'react'
import { Button } from '@smooth-ui/core-sc'
function Example() {
  return (
    <Button variant="primary" disabled>
      Disabled
    </Button>
  )
}
render(<Example />)

Accessibility

Button uses Reakit Button under the hood, it means it follows WAI-ARIA Button Pattern.

Read more about accessibility on Reakit.

API

Button