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 from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-button @element/themes

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 and Trailing Icons. Use only one icon per button. Place icons in the leading position by default.

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. Use only one icon per button. Place icons in the leading position by default. Expects the name of a valid Material 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. Use only one icon per button. Place icons in the leading position by default. Expects the name of a valid Material 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 |