styled-button-component

styled-button-component

The bootstrap button component made with styled-components.

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

npm install --save styled-button-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies

Usage

For detailed information take a look at the documentation.

import {
  Button,
  LinkButton,
  ButtonGroups,
  ButtonToolbar,
} from 'styled-button-component';

const MyButtonComponent = (props) => (
  <Button primary outline disabled>My Button</Button>
);

const MyButtonGroupComponent = (props) => (
  <ButtonGroup>
    <Button secondary>Left</Button>
    <Button secondary>Middle</Button>
    <Button secondary>Right</Button>
  </ButtonGroup>
);

const MyButtonToolbarComponent = (props) => (
  <ButtonToolbar>
    <ButtonGroup mr2>
      <LinkButton secondary>1</LinkButton>
      <LinkButton secondary>2</LinkButton>
      <LinkButton secondary>3</LinkButton>
      <LinkButton secondary>4</LinkButton>
    </ButtonGroup>
    <ButtonGroup mr2>
      <LinkButton secondary>5</LinkButton>
      <LinkButton secondary>6</LinkButton>
      <LinkButton secondary>7</LinkButton>
    </ButtonGroup>
    <ButtonGroup>
      <LinkButton secondary>8</LinkButton>
    </ButtonGroup>
  </ButtonToolbar>
);

Properties

Properties which can be added to the component to change the visual appearance.

• pill only on Button, LinkButton Type: boolean
• noRadius only on Button, LinkButton Type: boolean
• primary Type: boolean
• secondary Type: boolean
• success Type: boolean
• danger Type: boolean
• warning Type: boolean
• info Type: boolean
• light Type: boolean
• dark Type: boolean
• active Type: boolean
• disabled Type: boolean
• outline Type: boolean
• block Type: boolean
• sm small Type: boolean
• lg large Type: boolean
• vertical only on ButtonGroup Type: boolean

License

MIT © Lukas Aichbauer