button-icon

v1.10.0

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

1,904

VISIBILITY

Public

PUBLISHED

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