furl

Button

Buttons allow users to interact with your application.

Examples

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'furl-components';

ReactDOM.render(
  <div>
    <Button 
      color='primary' 
      size='large'
      fill='solid'
      text='uppercase'
      onClick={() => console.log('Hello!')}
    >
      Hello
    </Button>
    <Button
      type='link'
      fill='link'
      shape='rounded'
      href='https://www.google.com/'
      openIn='external'
    >
      Goodbye
    </Button>
  </div>, 
  document.getElementById('root')
);

API

Button props
Property Description Type Default
color button color string 'plain'
size button size string 'normal'
fill button fill style string 'flat'
shape button shape string 'normal'
text button text transformation string 'normal'
type button type string 'button'
disabled button disabled state boolean false
href button hyperlink url string
openIn target of the hyperlink> string 'self'
onClick button onclick event> function

Notes

  • color can be any of the predefined color palettes ('plain', 'primary', 'secondary', 'success', 'warning' or 'danger').
  • size can be one of the following: 'small', 'normal' or 'large'.
  • fill can be one of the following: 'flat', 'solid', 'light', 'gradient', 'outline', 'ghost' or 'link'.
  • shape can be either 'normal' or 'rounded'.
  • text can be either 'normal' or 'uppercase'.
  • type can be one of the following: 'button', 'submit', 'reset' or 'link'.
  • href and openIn only apply when type is equal to 'link'.