button

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

2 weeks ago

SIZE

21 KB

Buttons are clickable items used to perform an action.

1 contributor

Use button in your project ?

Copied

npm i @bit/nexxtway.react-rainbow.button

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.dev

Component Example

React

Vue

Angular

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

simple buttons

import React from 'react';
import { Button } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Button variant="base" label="Button Base" className="rainbow-m-around_medium" />
    <Button label="Button Neutral" variant="neutral" className="rainbow-m-around_medium" />
    <Button
        label="Button Outline Brand"
        variant="outline-brand"
        className="rainbow-m-around_medium"
    />
</div>

button variants

import React from 'react';
import { Button } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Button
        label="Button Brand"
        onClick={() => alert('clicked!')}
        variant="brand"
        className="rainbow-m-around_medium"
    />
    <Button
        label="Button Success"
        onBlur={() => alert('blurred!')}
        variant="success"
        className="rainbow-m-around_medium"
    />
    <Button label="Button Destructive" variant="destructive" className="rainbow-m-around_medium" />
</div>

button shaded

import React from 'react';
import { Button } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Button
        shaded
        label="Button Brand"
        onClick={() => alert('clicked!')}
        variant="brand"
        className="rainbow-m-around_medium"
    />
    <Button
        shaded
        label="Button Success"
        onBlur={() => alert('blurred!')}
        variant="success"
        className="rainbow-m-around_medium"
    />
    <Button
        shaded
        label="Button Destructive"
        variant="destructive"
        className="rainbow-m-around_medium"
    />
</div>

buttons with icon

import React from 'react';
import { Button } from 'react-rainbow-components';
// more details about how to use react-font-awesome
// visit https://github.com/FortAwesome/react-fontawesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faCheck, faArrowRight } from '@fortawesome/free-solid-svg-icons';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Button variant="base" className="rainbow-m-around_medium">
        <FontAwesomeIcon icon={faCoffee} className="rainbow-m-right_medium" />
        Button base
    </Button>
    <Button variant="neutral" className="rainbow-m-around_medium">
        Button with right icon
        <FontAwesomeIcon icon={faCheck} className="rainbow-m-left_medium" />
    </Button>
    <Button variant="brand" className="rainbow-m-around_medium">
        Brand button with right icon
        <FontAwesomeIcon icon={faArrowRight} className="rainbow-m-left_medium" />
    </Button>
</div>

disabled buttons

import React from 'react';
import { Button } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Button disabled label="Button Base Disabled" className="rainbow-m-around_medium" />
    <Button
        disabled
        label="Button Neutral Disabled"
        variant="neutral"
        className="rainbow-m-around_medium"
    />
    <Button
        disabled
        label="Button Brand Disabled"
        variant="brand"
        className="rainbow-m-around_medium"
    />
</div>

buttons inverse

import React from 'react';
import { Button } from 'react-rainbow-components';
// more details about how to use react-font-awesome
// visit https://github.com/FortAwesome/react-fontawesome
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';

const buttonsContainerStyles = {
    backgroundColor: '#061c3f',
    borderRadius: '0.875rem',
};

<div
    className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap"
    style={buttonsContainerStyles}
>
    <Button label="Button Inverse" variant="inverse" className="rainbow-m-around_medium" />
    <Button variant="border-inverse" className="rainbow-m-around_medium">
        Button Inverse with icon
        <FontAwesomeIcon icon={faArrowRight} className="rainbow-m-left_medium" />
    </Button>
</div>

buttons loadings

import React from 'react';
import { Button } from 'react-rainbow-components';

<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
    <Button
        isLoading
        label="Button Outline Brand"
        variant="outline-brand"
        className="rainbow-m-around_medium"
    />
    <Button
        isLoading
        label="Button Neutral"
        variant="neutral"
        className="rainbow-m-around_medium"
    />
    <Button isLoading label="Button Brand" variant="brand" className="rainbow-m-around_medium" />
</div>

Properties

Name	Type	Default value	Description
label	`string \| node`	`undefined`
children	`node[] \| object`	`null`
variant	`'base' \| 'neutral' \| 'brand' \| 'outline-brand' \| 'destructive' \| 'success' \| 'inverse' \| 'border-inverse'`	`'neutral'`
isLoading	`bool`	`false`
label	`string \| node`	`undefined`	The text to be displayed inside the button.
children	`node[] \| object`	`null`	The content of the button, used to render icon or text elements inside the button. Children take precedence over label.
variant	`'base' \| 'neutral' \| 'brand' \| 'outline-brand' \| 'destructive' \| 'success' \| 'inverse' \| 'border-inverse'`	`'neutral'`	The variant changes the appearance of the button. Accepted variants include base, neutral, brand, outline-brand, destructive, success, inverse and border-inverse.
shaded	`bool`	`false`	Specifies true when the button has a shadow around it. Only neutral, brand, destructive and success variant can be shaded.
title	`string`	`undefined`	Displays tooltip text when the mouse moves over the element.
type	`'button' \| 'submit' \| 'reset'`	`'button'`	Specifies the type of button. Valid values are button, reset, and submit.
disabled	`bool`	`false`	Specifies whether this button should be displayed in a disabled state. Disabled buttons can’t be clicked.
tabIndex	`number \| string`	`undefined`	Specifies the tab order of an element (when the tab button is used for navigating).
onClick	`function`	`() => {}`	The action triggered when the element is clicked.
onKeyDown	`function`	`() => {}`	The action triggered when a keyboard key is pressed.
onFocus	`function`	`() => {}`	The action triggered when the element receives focus.
onBlur	`function`	`() => {}`	The action triggered when the element releases focus.
ariaHaspopup	`bool`	`undefined`	Indicates that the element has a popup context menu or sub-level menu.
ariaControls	`string`	`undefined`	A space-separated list of element IDs that this button controls the contents or presence of.
ariaExpanded	`bool`	`undefined`	Indicates whether an element the button controls is expanded or collapsed. Valid values are ‘true’ or 'false’.
ariaPressed	`bool`	`undefined`	Indicates that the element has been pressed.
form	`string`	`undefined`	It must be the id attribute of a form element that the button is associated with.
className	`string`	`undefined`	A CSS class for the outer element, in addition to the component’s base classes.
style	`object`	`undefined`	An object with custom style applied to the outer element.
id	`string`	`undefined`	The id of the outer element.
isLoading	`bool`	`false`	If it is set to true, then a loading symbol is displayed.