button-icon

v1.10.0

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

749

VISIBILITY

Public

PUBLISHED

7 months ago

SIZE

20 KB

Buttons Icons provide the user with visual iconography that is typically used to invoke an event or action.

1 contributor

Install button-icon as a package?

Copied

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

Set Bit as a scoped registryLearn more

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

Component Example

React

Vue

Angular

React Native

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

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>

Properties

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.