Package Exports

styled-button-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-button-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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