Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

buttons

v4.15.0arrow_drop_down
v4.15.0
STATUS
Passing
DOWNLOADS
302
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
N/A
Button: most commonly used, can have a icon on the left or right side.
1 contributor
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.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
 
	<div>
		<Button height={32} appearance="minimal" marginRight={16}>
			Default
        </Button>
		<Button
			height={32}
			appearance="minimal"
			marginRight={16}
			intent="success"
		>
			Success
        </Button>
		<Button
			height={32}
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

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
NameTypeDefault valueDescription
isActive
boolfalse

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.