Community

Community

Pricing Enterprise

segmentio / evergreen

buttons

v4.15.0

v4.15.0

STATUS

Passing

DOWNLOADS

596

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 years ago

SIZE

N/A

Button: most commonly used, can have a icon on the left or right side.

button with icon

1 contributor

Like

Install buttons as a package?

Copied

npm i @bit/segmentio.evergreen.buttons

Set Bit as a scoped registryLearn more

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

Component Example

React

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';

No preview available

modifieddraft

modifieddraft

modifieddraft

modifieddraft

Composes the Button component as the base.

Composes the Button component as the base.

Composes the dimensions spec from the Box primitivie.

Composes the spacing spec from the Box primitivie.

Composes the position spec from the Box primitivie.

Composes the layout spec from the Box primitivie.

The intent of the button.

The appearance of the button.

When true, show a loading spinner before the children. This also disables the button.

Forcefully set the active state of a button. Useful in conjuction with a Popover.

Sets an icon before the text. Can be any icon from Evergreen.

Sets an icon after the text. Can be any icon from Evergreen.

When true, the button is disabled. isLoading also sets the button to disabled.

Theme provided by ThemeProvider.

Class name passed to the button. Only use if you know what you are doing.

Composes the dimensions spec from the Box primitivie.

Composes the spacing spec from the Box primitivie.

Composes the position spec from the Box primitivie.

Composes the layout spec from the Box primitivie.

Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing.

If null or undefined or false, this component will render nothing.
If given an IconName (a string literal union of all icon names), that icon will be rendered as an <svg> with <path> tags.
If given a JSX.Element, that element will be rendered and all other props on this component are ignored. This type is supported to simplify usage of this component in other Blueprint components. As a consumer, you should never use <Icon icon={<element />} directly; simply render <element /> instead.

Specifies an explicit icon size instead of the default value

The intent of the button.

The appearance of the button.

Forcefully set the active state of a button. Useful in conjuction with a Popover.

When true, the button is disabled. isLoading also sets the button to disabled.

Theme provided by ThemeProvider.

Class name passed to the button. Only use if you know what you are doing.

Properties

Name	Type	Default value	Description
isActive	`bool`	`false`	Forcefully set the active state of a button. Useful in conjuction with a Popover.
disabled	`bool`		When true, the button is disabled. isLoading also sets the button to disabled.
icon	`string`	`'caret-down'`	Name of a Blueprint UI icon, or an icon element, to render. This prop is required because it determines the content of the component, but it can be explicitly set to falsy values to render nothing. If `null` or `undefined` or `false`, this component will render nothing. If given an `IconName` (a string literal union of all icon names), that icon will be rendered as an `<svg>` with `<path>` tags. If given a `JSX.Element`, that element will be rendered and all other props on this component are ignored. This type is supported to simplify usage of this component in other Blueprint components. As a consumer, you should never use `<Icon icon={<element />}` directly; simply render `<element />` instead.
theme (required)	`object`		Theme provided by ThemeProvider.
className	`string`		Class name passed to the button. Only use if you know what you are doing.

Help and resources