Button

Base on https://material-ui.com/components/buttons/

Related component

Icon

https://material-ui.com/components/material-icons/

Basic usage

import { Button } from '@doopage/react-ui-kit'

const Example = () => <Button color='warning'>button</Button>;

export default Example;

Playground

Normal

<Button color="primary">Some messages</Button>
<Button color="info">Some messages</Button>
<Button color="warning" disabled>
  Some messages
</Button>
<Button color="success">Some messages</Button>
<Button color="danger">Some messages</Button>
<Button color="rose">Some messages</Button>
<Button color="gray">Some messages</Button>
<Button color="white">Some messages</Button>

<Button color="primary">Some messages</Button>
<Button color="info">Some messages</Button>
<Button color="warning" disabled>
  Some messages
</Button>
<Button color="success">Some messages</Button>
<Button color="danger">Some messages</Button>
<Button color="rose">Some messages</Button>
<Button color="gray">Some messages</Button>
<Button color="white">Some messages</Button>

Smooth

<Button color="primary" smooth>
  Some messages
</Button>
<Button color="info" smooth>
  Some messages
</Button>
<Button color="warning" smooth>
  Some messages
</Button>
<Button color="success" smooth>
  Some messages
</Button>
<Button color="danger" smooth>
  Some messages
</Button>
<Button color="gray" smooth>
  Some messages
</Button>
<Button color="primary" smooth disabled>
  Some messages
</Button>

<Button color="primary" smooth>
  Some messages
</Button>
<Button color="info" smooth>
  Some messages
</Button>
<Button color="warning" smooth>
  Some messages
</Button>
<Button color="success" smooth>
  Some messages
</Button>
<Button color="danger" smooth>
  Some messages
</Button>
<Button color="gray" smooth>
  Some messages
</Button>
<Button color="primary" smooth disabled>
  Some messages
</Button>

Simple

<Button simple color="primary">
  Some messages
</Button>
<Button simple color="info" disabled>
  Some messages
</Button>

<Button simple color="primary">
  Some messages
</Button>
<Button simple color="info" disabled>
  Some messages
</Button>

Size

<Button size="tiny" color="info">
  Tiny
</Button>
<Button size="small" color="success">
  Small
</Button>
<Button size="normal" color="warning">
  Normal
</Button>
<Button size="large" color="danger">
  Large
</Button>

<Button size="tiny" color="info">
  Tiny
</Button>
<Button size="small" color="success">
  Small
</Button>
<Button size="normal" color="warning">
  Normal
</Button>
<Button size="large" color="danger">
  Large
</Button>

Round & Outline

<Button round>Some messages</Button>
<Button round disabled color="success">
  Some messages
</Button>
<Button outline>Some messages</Button>
<Button outline disabled>
  Some messages
</Button>

<Button round>Some messages</Button>
<Button round disabled color="success">
  Some messages
</Button>
<Button outline>Some messages</Button>
<Button outline disabled>
  Some messages
</Button>

With helperText

<Button fullWidth upcaseText helperText="this is heplerText">
  Some messages
</Button>
<Button helperText="this is heplerText" placement="right">
  Some messages
</Button>

<Button fullWidth upcaseText helperText="this is heplerText">
  Some messages
</Button>
<Button helperText="this is heplerText" placement="right">
  Some messages
</Button>

With icon

<Button color="info" startIcon={<AdbIcon />}>
  Some messages
</Button>
<Button color="success" simple endIcon={<AdbIcon />}>
  Some messages
</Button>
<Button color="success" outline endIcon={<AdbIcon />} startIcon={<AdbIcon />}>
  Some messages
</Button>

<Button color="info" startIcon={<AdbIcon />}>
  Some messages
</Button>
<Button color="success" simple endIcon={<AdbIcon />}>
  Some messages
</Button>
<Button color="success" outline endIcon={<AdbIcon />} startIcon={<AdbIcon />}>
  Some messages
</Button>

Just icon

<Button justIcon size="tiny" color="info" outline>
  <AdbIcon />
</Button>
<Button justIcon size="small" color="success" simple>
  <AdbIcon />
</Button>
<Button justIcon size="normal" color="warning" round>
  <AdbIcon />
</Button>
<Button justIcon size="large" color="danger">
  <AdbIcon />
</Button>

<Button justIcon size="tiny" color="info" outline>
  <AdbIcon />
</Button>
<Button justIcon size="small" color="success" simple>
  <AdbIcon />
</Button>
<Button justIcon size="normal" color="warning" round>
  <AdbIcon />
</Button>
<Button justIcon size="large" color="danger">
  <AdbIcon />
</Button>

With href

<Button href="https://www.npmjs.com/package/@doopage/react-ui-kit">
  With href
</Button>

<Button href="https://www.npmjs.com/package/@doopage/react-ui-kit">
  With href
</Button>

With loading

<Button loading>some text</Button>
<Button loading justIcon>
  <AdbIcon />
</Button>
<Button loading justIcon size="small">
  <AdbIcon />
</Button>

<Button loading>some text</Button>
<Button loading justIcon>
  <AdbIcon />
</Button>
<Button loading justIcon size="small">
  <AdbIcon />
</Button>