Button

The Button category in the @bentley/ui-core package includes various Button components.

Button

The Button component is a wrapper for the <button> HTML element and has support for the Light and Dark themes.

Properties

All props for the Button are optional. The size prop determines whether the Button is the default size or a large size. The buttonType prop determines the color properties of the Button. The onClick event handler is run when the Button is clicked or touched.

Examples

Primary Button

The default button has the default buttonType of ButtonType.Primary and has a green background.

<Button>Primary Button</Button>

Disabled Button

The disabled prop is used to disable a Button.

<Button disabled>Disabled Button</Button>

Blue Button

A buttonType prop of ButtonType.Blue results in a blue background.

<Button buttonType={ButtonType.Blue}>Blue Button</Button>

Hollow Button

A buttonType prop of ButtonType.Hollow results in a transparent background.

<Button buttonType={ButtonType.Hollow}>Hollow Button</Button>

Large Buttons

When using a size prop of ButtonSize.Large, the Button has a larger size.

<Button size={ButtonSize.Large}>Primary Button</Button>

Dark Theme

UnderlinedButton

The UnderlinedButton component makes text clickable and underlined.

Properties

The children prop is the string that will be rendered by the button. This prop is mandatory. The title prop is the tooltip string. The onClick event handler is run when the Button is clicked or touched.

Example

<UnderlinedButton>Underlined Button</UnderlinedButton>

Light Theme

Dark Theme

API Reference

• Button

Last Updated: 11 June, 2024