Button

A component for displaying variously styled buttons.

Button

Example

:global(.buttons) > button {
  margin: 8px;
}

:global(.dark) {
  background: #000;
}

<div id="buttons"></div>
<div id="dark"></div>

import React, {Fragment} from 'react';
import {render} from 'react-dom';
import Button from '@jetbrains/ring-ui/components/button/button';
import {PencilIcon} from '@jetbrains/ring-ui/components/icon';

function renderButtonModifications(theme) {
  return [
    'active', 'primary', 'danger', 'delayed', 'disabled', 'dropdown'
  ].map(modifier => (
    <Button
      theme={theme}
      key={modifier}
      {...{[modifier]: true}}
    >Button {modifier}</Button>
  ));
}

function renderTextModifications(theme) {
  return [
    'primary', 'danger', 'disabled', 'loader'
  ].map(modifier => (
     <Button
       text
       theme={theme}
       key={modifier}
       {...{[modifier]: true}}
     >Text action {modifier}</Button>
  ));
}

function renderIconWithTextModifications(theme) {
  return [
    {label: 'primary', primary: true},
    {label: 'danger', danger: true},
    {label: 'disabled', disabled: true},
    {label: 'primary-disabled', primary: true, disabled: true},
    {label: 'danger-disabled', danger: true, disabled: true}
  ].map((modifiers, index) => (
     <Button
       theme={theme}
       key={index}
       icon={PencilIcon}
       {...modifiers}
     >Icon action {modifiers.label}</Button>
  ));
}

function renderIconActionModifications(theme) {
  return [
    {label: 'primary', primary: true},
    {label: 'danger', danger: true},
    {label: 'disabled', disabled: true},
    {label: 'primary-disabled', primary: true, disabled: true},
    {label: 'danger-disabled', danger: true, disabled: true}
  ].map((modifiers, index) => (
    <Button
      theme={theme}
      key={index}
      title={`Just icon action (${modifiers.label})`}
      icon={PencilIcon}
      {...modifiers}
    />
  ));
}

const buttons = (
  <div className="buttons">
    <Button>Button default</Button>

    <Button
      short
    >...</Button>

    <Button
      href="/"
    >Button link</Button>

    <Button
      loader
    >Button loader</Button>

    <Button
      primary
      loader
    >Primary loader</Button>

    <Button
      icon={PencilIcon}
      loader
    >Icon loader</Button>

    {renderButtonModifications()}

    <Button
      text
    >Text action</Button>

    {renderTextModifications()}

    <Button
      icon={PencilIcon}
    >Icon action</Button>

    {renderIconWithTextModifications()}

    <Button
      icon={PencilIcon}
      title="Icon action"
    />

    {renderIconActionModifications()}
  </div>
);

render(buttons, document.getElementById('buttons'));

const dark = (
  <div className="buttons dark">
    <Button
      theme={Button.Theme.DARK}
    >Button default</Button>


    <Button
      theme={Button.Theme.DARK}
      short
    >...</Button>

    <Button
      theme={Button.Theme.DARK}
      href="/"
    >Button link</Button>

    <Button
      theme={Button.Theme.DARK}
      loader
    >Dark loader</Button>

    {renderButtonModifications(Button.Theme.DARK)}

    <Button
      theme={Button.Theme.DARK}
      text
    >Text action</Button>

    {renderTextModifications(Button.Theme.DARK)}

    <Button
      theme={Button.Theme.DARK}
      icon={PencilIcon}
    >Icon action</Button>

    {renderIconWithTextModifications(Button.Theme.DARK)}

    <Button
      icon={PencilIcon}
      theme={Button.Theme.DARK}
      title="Icon action"
    />

    {renderIconActionModifications(Button.Theme.DARK)}
  </div>
);

render(dark, document.getElementById('dark'));

Perform a heavy operation while loading

Example

#example > :not(:first-child) {
  margin-left: 8px;
}

<div id="example"></div>

import React, {Component, Fragment} from 'react';
import {render} from 'react-dom';
import Button from '@jetbrains/ring-ui/components/button/button';
import Loader from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
import {HourglassIcon} from '@jetbrains/ring-ui/components/icon';

class Sleeper extends Component {
  state = {
    loading: false
  };

  load = () => {
    this.setState({loading: true}, () => {
      setTimeout(this.sleep, 2000);
    })
  }

  sleep = () => {
    const date = new Date();
    let curDate
    do {
      curDate = new Date();
    } while(curDate - date < 2000);
    this.setState({loading: false});
  }

  render() {
    const {loading} = this.state;
    return (
      <Fragment>
        <Button loader={loading} onClick={this.load}>Sleep</Button>
        <Button loader={loading} icon={HourglassIcon} onClick={this.load} />
        {loading && <Loader/>}
      </Fragment>
    );
  }
}

render(<Sleeper />, document.getElementById('example'));