LSK.js – Button

React component for buttons creation

Just press on Button and take a result from @lskjs/button. Or in reverse.

Installation and usage

The easiest way to use is to install it from npm and build it into your app with Webpack.

npm install @lskjs/button

Then use it in your app:

import Button from '@lskjs/button';

const App = (
  <Button variant="primary">Primary button</Button>
);

For more examples and usage, please refer

• Tutorial

• Storybook

Props

• appearance // atlas

• variants = [ // bootstrap default primary secondary success warning danger info light dark ]

• views = [ transparent text ]

• alternatives = [ normal, outline, empty // link ]

• shape = [ circle ]

• sizes = [xs, sm, md, lg, xl]

• states = [ active, focusable, disabled]

• colors={{}}

See the props documentation for complete documentation on the props react-select supports.

Examples

import Button from '@lskjs/button/Button';
import ButtonGroup from '@lskjs/button/ButtonGroup';

export default () => (
  <ButtonGroup>
    <Button variant="primary">Primary button</Button>
    <Button variant="outline-secondary">Secondary Button</Button>
    <Button as="input" type="submit" value="Submit Button" />
    <Button size="lg">Large Button</Button>
    <Button block>Block Button</Button>
    <Button active>Active Button</Button>
    <Button disabled>Disabled Button</Button>
    <Button type="primary" shape="circle" icon={<SearchOutlined />} />
  </ButtonGroup>
)

See the more examples in Storybook.

Details

Theme

1. change variants colors
2. new variants from theme

HOCS

пока нету но скоро будет

• withFetch
• withState
• withRipple

Cases

Loading button

// TODO: 

Icon button

// TODO: 

Stateful button

// TODO: 

Next features

• ButtonGroup
• Dropdown
• Menu

More info

Links

• Tutorial
• Docs
• Storybook
• Changelog
• Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Contact

• Email
• Telegram chat

Contributors ✨

Igor Suvorov 💻 🎨 🤔

Thanks goes to these wonderful people (emoji key):

License

This project is licensed under the MIT License - see the LICENSE file for details

Inspired by

• https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.js
• https://react-bootstrap.netlify.com/components/buttons/#buttons
• https://atlaskit.atlassian.com/packages/core/button
• http://elemental-ui.com/buttons
• https://reakit.io/docs/button/
• https://ant.design/components/button/

Contributing

1. Fork it (https://github.com/yourname/yourproject/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request