Have ideas to improve npm?Join in the discussion! »

@arnat/styled-buttonTypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

ARNAT - styled-button

npm Travis branch Codecov branch storybook lerna

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

Install

npm i @arnat/styled-button

DownloadsWeekly Downloads

1

Version

0.0.12

License

MIT

Unpacked Size

66.2 kB

Total Files

13

Last publish

Collaborators

  • avatar
  • avatar