button
v1.10.0arrow_drop_down


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>
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. |