button-icon
v1.10.0arrow_drop_down



button icon base
import React from 'react';
import { ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-regular-svg-icons';
import { faSlidersH, faSignal, faRedo, faTimes } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
<div className="rainbow-p-right_large">
<ButtonIcon size="large" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon size="medium" icon={<FontAwesomeIcon icon={faSlidersH} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon size="small" icon={<FontAwesomeIcon icon={faSignal} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon size="x-small" icon={<FontAwesomeIcon icon={faRedo} />} />
</div>
<ButtonIcon size="xx-small" icon={<FontAwesomeIcon icon={faTimes} />} />
</div>
button icon border
import React from 'react';
import { ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-regular-svg-icons';
import {
faTrashAlt,
faPencilAlt,
faLocationArrow,
faArrowDown,
} from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
<div className="rainbow-p-right_large">
<ButtonIcon variant="border" size="large" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon
variant="border"
size="medium"
icon={<FontAwesomeIcon icon={faLocationArrow} />}
/>
</div>
<div className="rainbow-p-right_large">
<ButtonIcon variant="border" size="small" icon={<FontAwesomeIcon icon={faPencilAlt} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon variant="border" size="x-small" icon={<FontAwesomeIcon icon={faTrashAlt} />} />
</div>
<ButtonIcon variant="border" size="xx-small" icon={<FontAwesomeIcon icon={faArrowDown} />} />
</div>
button icon filled
import React from 'react';
import { ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-regular-svg-icons';
<div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
<div className="rainbow-p-right_large">
<ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon variant="brand" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<ButtonIcon variant="success" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
button icon shaded
import React from 'react';
import { ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-regular-svg-icons';
<div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
<div className="rainbow-p-right_large">
<ButtonIcon shaded variant="border-filled" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon shaded variant="brand" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<ButtonIcon shaded variant="success" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
button icon disabled
import React from 'react';
import { ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-regular-svg-icons';
<div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center">
<div className="rainbow-p-right_large">
<ButtonIcon variant="border" disabled icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<div className="rainbow-p-right_large">
<ButtonIcon variant="brand" disabled icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<ButtonIcon disabled icon={<FontAwesomeIcon icon={faStar} />} />
</div>
button icon inverse
import React from 'react';
import { ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStar } from '@fortawesome/free-regular-svg-icons';
const buttonsIconContainerStyles = {
borderRadius: '0.25rem',
};
<div className="rainbow-p-vertical_large rainbow-p-left_x-large rainbow-flex rainbow-align_center rainbow-background-color_dark-1 rainbow-border-radius_oval">
<div className="rainbow-p-right_large">
<ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
<ButtonIcon variant="inverse" icon={<FontAwesomeIcon icon={faStar} />} />
</div>
Name | Type | Default value | Description |
---|---|---|---|
icon | node | null | The icon to show if it is passed. It must be a svg icon or a font icon. It is a required value. |
variant | 'base' | 'brand' | 'success' | 'border' | 'border-filled' | 'border-inverse' | 'inverse' | 'base' | The variant changes the appearance of buttonIcon. Accepted variants include base, brand, success, border, border-filled, border-inverse and inverse. This value defaults to base. |
size | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'medium' | The size of the buttonIcon. For the base variant, options include x-small, small, medium, and large. For non-base variants, options include xx-small, x-small, small, and medium. This value defaults to medium. |
shaded | bool | false | Specify true when the button has a shadow around it. This value defaults to false. Only border-filled, brand, 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. This value defaults to button. |
disabled | bool | false | Specifies whether this button should be displayed in a disabled state. Disabled buttons can’t be clicked. This value defaults to false. |
tabIndex | number | string | undefined | Specifies the tab order of an element (when the tab button is used for navigating). |
onClick | function | () => {} | The action that will be run when the button is clicked. |
onMouseDown | function | () => {} | The action that will be run when the user presses the mouse button. |
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. |
assistiveText | string | undefined | A description for assistive sreen readers. |
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’. |
ariaHaspopup | bool | undefined | Indicates that the element has a popup context menu or sub-level menu. |
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. |