Button

Buttons are Bootstrap's core component for triggering various actions. In Shards, they're very flxible, support multiple sizes, styles, states and many more.

Button Themes

Using the theme prop you can easily change the appearance of your button using one the main theme colors: primary, secondary, success, danger, warning, info, light and dark. The default theme value is primary.

import React from "react";
import { Button } from "shards-react";

export default function ButtonsExample() {
  return (
    <div className="example">
      <Button>Primary</Button>
      <Button theme="secondary">Secondary</Button>
      <Button theme="success">Success</Button>
      <Button theme="info">Info</Button>
      <Button theme="warning">Warning</Button>
      <Button theme="danger">Danger</Button>
      <Button theme="light">Light</Button>
      <Button theme="dark">Dark</Button>
    </div>
  );
}

Outline Styled Buttons

You can use the outline prop to remove the background color and apply a thin border that make your buttons look outlined.

import React from "react";
import { Button } from "shards-react";

export default function OutlineButtonsExample() {
  return (
    <div className="example">
      <Button outline>Primary</Button>
      <Button outline theme="secondary">
        Secondary
      </Button>
      <Button outline theme="success">
        Success
      </Button>
      <Button outline theme="info">
        Info
      </Button>
      <Button outline theme="warning">
        Warning
      </Button>
      <Button outline theme="danger">
        Danger
      </Button>
      <Button outline theme="light">
        Light
      </Button>
      <Button outline theme="dark">
        Dark
      </Button>
    </div>
  );
}

Pill Shaped Buttons

The pill prop applies a larger border radius that make your buttons look more rounded and pill-like.

import React from "react";
import { Button } from "shards-react";

export default function PillButtonsExample() {
  return (
    <div className="example">
      <Button pill>Primary</Button>
      <Button pill theme="secondary">
        Secondary
      </Button>
      <Button pill theme="success">
        Success
      </Button>
      <Button pill theme="info">
        Info
      </Button>
      <Button pill theme="warning">
        Warning
      </Button>
      <Button pill theme="danger">
        Danger
      </Button>
      <Button pill theme="light">
        Light
      </Button>
      <Button pill theme="dark">
        Dark
      </Button>
    </div>
  );
}

Mixed Styles

Similarly to Badges you can also mix both the pill and outline props to get a mixed "outline-pill" result.

import React from "react";
import { Button } from "shards-react";

export default function OutlinePillButtonsExample() {
  return (
    <div className="example">
      <Button outline pill>
        Primary
      </Button>
      <Button outline pill theme="secondary">
        Secondary
      </Button>
      <Button outline pill theme="success">
        Success
      </Button>
      <Button outline pill theme="info">
        Info
      </Button>
      <Button outline pill theme="warning">
        Warning
      </Button>
      <Button outline pill theme="danger">
        Danger
      </Button>
      <Button outline pill theme="light">
        Light
      </Button>
      <Button outline pill theme="dark">
        Dark
      </Button>
    </div>
  );
}

Squared Style

Using the squared prop you can style your buttons to look, well, squared.

Note: The pill prop has priority over the squared prop.

import React from "react";
import { Button } from "shards-react";

export default function SquaredButtonsExample() {
  return (
    <div className="example">
      <Button squared>Primary</Button>
      <Button squared theme="secondary">
        Secondary
      </Button>
      <Button squared theme="success">
        Success
      </Button>
      <Button squared theme="info">
        Info
      </Button>
      <Button squared theme="warning">
        Warning
      </Button>
      <Button squared theme="danger">
        Danger
      </Button>
      <Button squared theme="light">
        Light
      </Button>
      <Button squared theme="dark">
        Dark
      </Button>
    </div>
  );
}

Mixed Outline-Squared Style

Mixing the outline and squared prop is also possible and it will render an outlined and squared button.

import React from "react";
import { Button } from "shards-react";

export default function OutlineSquaredPillButtonsExample() {
  return (
    <div className="example">
      <Button outline squared>
        Primary
      </Button>
      <Button outline squared theme="secondary">
        Secondary
      </Button>
      <Button outline squared theme="success">
        Success
      </Button>
      <Button outline squared theme="info">
        Info
      </Button>
      <Button outline squared theme="warning">
        Warning
      </Button>
      <Button outline squared theme="danger">
        Danger
      </Button>
      <Button outline squared theme="light">
        Light
      </Button>
      <Button outline squared theme="dark">
        Dark
      </Button>
    </div>
  );
}

Button Sizes

Using the size prop you can control the size of your buttons. There are three sizes available: normal (default), lg for large buttons and sm for small buttons.

import React from "react";
import { Button } from "shards-react";

export default function ButtonsSizesExample() {
  return (
    <div className="example">
      <Button size="lg">Large</Button>
      <Button>Normal</Button>
      <Button size="sm">Small</Button>
    </div>
  );
}

Active State

Controlling the active state and appearance of your buttons can be achieved via the active prop.

import React from "react";
import { Button } from "shards-react";

export default function ActiveButtonsExample() {
  return (
    <div className="example">
      <Button active theme="success">
        Success Active
      </Button>
      <Button active theme="danger">
        Danger Active
      </Button>
    </div>
  );
}

Disabled State

Similarly to the active state, the disabled state can also be controlled via the disabled prop.

import React from "react";
import { Button } from "shards-react";

export default function DisabledButtonsExample() {
  return (
    <div className="example">
      <Button disabled theme="success">
        Success Disabled
      </Button>
      <Button disabled theme="danger">
        Danger Disabled
      </Button>
    </div>
  );
}

Block Level Buttons

Using the block prop you can make buttons display using the full-width of their parent element.

import React from "react";
import { Button } from "shards-react";

export default function BlockButtonsExample() {
  return (
    <div className="example">
      <Button block>Primary</Button>
      <Button block theme="secondary">
        Secondary
      </Button>
    </div>
  );
}

Props

The following props are available for the Button component.

Prop	Description	Type	Default	Required
className	The class name.	`String`	-	No
children	The children nodes.	`Node`	-	No
theme	The theme color.	`String`	`"primary"`	No
size	The size.	`String`	-	No
outline	Whether it is outline, or not.	`Bool`	-	No
pill	Whether it is pill, or not.	`Bool`	-	No
squared	Whether it is squared, or not.	`Bool`	-	No
active	Whether it is active, or not.	`Bool`	-	No
block	Whether it should be displayed as a block (full-width), or not.	`Bool`	-	No
disabled	Whether it is disabled, or not.	`Bool`	-	No
tag	The component tag.	`FuncString`	`"button"`	No
innerRef	The inner ref. @type {[type]}	`ObjectFuncString`	-	No