@element-public/react-button NPM

Button

Description

A button should contain a clear call to action for the user. Action verbs are good text for the button container. The style and size of the button should reflect its hierarchy and importance of the action being called.

See live demos on storybook

Storybook Button Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-button @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

A Button is a clickable object that allows a user to trigger an action. Buttons of various styles exist, and should be compared and chosen with specific use cases in mind. Useful props that can be altered depending on use case include fullWidth, unelevated, and variant. Single Buttons can be used, or Buttons can be placed in a Button Group. See Button Group description below and Storybook for examples of each use case.

Usage

Buttons are often used with or inside other components, such as Banner, Card, and File Upload.

Buttons can include Leading or Trailing Icons. If both are set, Leading Icon takes precedence.

Button Group

A Button Group acts as a wrapper around more than one Button. The Button Group has a variant prop that determines the spacing between each Button in the Group. The variant options include dense, standard, and airy spacing.

Button Props

Name	Type	Default	Required	Description
buttonSize	string	'themeDefault'	false	One of 'xsmall', 'small', 'medium', 'large' and 'xlarge' will change the size of the button. Defaults according to your theme.Accepted Values: xsmall, small, medium, large, xlarge, themeDefault
className	string	undefined	false	The css class name to be passed through to the component markup.
disabled	boolean	false	false	Prevent the user from interacting with the component.
elevation	string	'default'	false	Sets elevation of the button. Default will be the theme default.Accepted Values: default, elevated, flat
fullWidth	boolean	false	false	Applies a full-width style where the textfield will fill it's container.
href	string	null	false	The button will render as an anchor tag. If the tag prop is set, that prop will take precedence.
label	string	null	false	The displayed text. Expects a valid string. If label and children are both set, label will take priority.
leadingIcon	string\|function\|React.ReactNode	undefined	false	Adds the given Icon to the left of the button text. May not be used with `trailingIcon` - if `leadingIcon` and `trailingIcon` are both set, `leadingIcon` will take priority. Expects the name of a valid Material.io icon, however an icon component may be passed in instead for more control,
tag	string\|React.ElementType\|React.Component	null	false	By default a button or anchor tag will be rendered, this allows another tag/component to be used instead. A block type element/component is suggested.
themeColor	string	'primary'	false	Sets the theme color for the button. Most commonly used when the control is placed on a darker surface.Accepted Values: primary, secondary, danger, success, on-unknown-black, on-unknown-white, on-primary, on-secondary, on-success, on-dangerDeprecated Values: onUnknownBlack, onUnknownWhite
trailingIcon	string\|function\|React.ReactNode	undefined	false	Adds the given Icon to the right of the button text. May not be used with `leadingIcon` - if `leadingIcon` and `trailingIcon` are both set, `leadingIcon` will take priority. Expects the name of a valid Material.io icon, however an icon component may be passed in instead for more control.
type	string	'button'	false	This applies the html button type (button, submit, reset) or the anchor media type when used with the href property.Accepted Values: button, submit, reset
variant	string	'filled'	false	Applies the selected style to the button. `rounded-small` and `rounded-micro` are only available on select themes.Accepted Values: filled, outlined, danger, text, success, rounded-small, rounded-micro

Button Deprecated Props

Name	Type	Default	Required	Deprecated	Description
altColor	boolean	undefined	false	Use `themeColor='secondary'` instead.	Preview feature, this may change. Apply alternative button color scheme (defined by the individual theme).
customRef	reference	undefined	false	forwardRef has been implemented for Button.	Reference to the DOM button. This enables a greater level of integration.
danger	boolean	undefined	false	Use `variant='danger'` instead.	Apply danger style to the button.
filled	boolean	undefined	false	Use `variant='filled'` instead.	Apply a filled-in style. Previously called `primary`.
outlined	boolean	undefined	false	Use `variant='outlined'`.	Apply outlined style to the button. Previously called `secondary`.
primary	boolean	undefined	false	Use `variant='filled'` instead.	Apply primary style to the Button.
secondary	boolean	undefined	false	Use `'variant=outlined'` instead.	Apply secondary style to the Button.
tertiary	boolean	undefined	false	Use `variant='embedded'` instead.	Apply tertiary style to the Button.
text	boolean	undefined	false	Use `variant='text'` instead.	Apply unfilled, un-outlined style to the Button. Previously called `tertiary`.
unelevated	boolean	undefined	false	Use `elevation='flat' instead. \| Remove elevation.

Button Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Content to be rendered inside the button. Can be used instead `label` of to provide more flexibility. Accepts any valid markup. Warning, if Label is set, it will be used instead of child content.

Button Events

Name	Default	Required	Params	Description
onClick	undefined	false		The primary interaction event for button.

Button Group Props

Name	Type	Default	Required	Description
variant	string	'standard'	false	How much spacing between buttons. Dense is 8p, standard is 16px and airy is 24px.Accepted Values: dense, standard, airy

Button Group Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Children to be rendered. Expects multiple Element Buttons

clsx prop-types @babel/runtime-corejs3 @element-public/react-icon @element-public/react-common @element-public/react-ripple

@element-public/react-select @element-public/react-side-sheet @element-public/react-stepper @element-public/react-bottom-sheet @element-public/react-card @element-public/react-components @element-public/react-datepicker @element-public/react-dialog

1.0.0

11 months ago