This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

ARNAT - styled-button

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import { Button, LinkButton, ButtonGroups, ButtonToolbar } from '@arnat/styled-button';

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