Button

Components > User Interaction > Button

Use this component to...

Trigger an action

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Buttons trigger an action when pressed: they can execute code, route to another view in your application, or open a URL.

Text and icons

Buttons can display a text label, an icon, or both.

Three buttons: one with a text label, another with an icon, and a third with both text and an icon

Styling

Buttons support the following styling:

Use secondary styling for most buttons. The styling for secondary buttons is visually lighter to prevent the button from distracting the user’s eye from the data.
Use primary styling for a button that performs the primary action in the view. The styling for primary buttons is visually heavy in order to draw attention to the button’s importance. There should be no more than one primary button in each view (or at most in each display block).
Use destructive styling if pressing the button triggers a significant, destructive action like deletion.
- This button style should be used sparingly.
- If your application requires the user to confirm the destructive action after pressing a button — let’s say your app displays a confirmation dialog box — then the initial button that the user presses should not use destructive styling. However, you should use destructive styling on the destructive button option in the confirmation dialog.

Styling options for basic buttons

Badges

Buttons can optionally display a short text message highlighted in the top-right corner of the button, called a badge. Badges are typically used either to display a count of data items that can be accessed when the user presses the button or to call the user’s attention to a special condition for the button.

Two buttons displaying badges: The first shows the number of unread messages. The second indicates that something about the Print button needs the user’s attention.

Usage

Buttons can be used in the following locations…

In a toolbar at the function view level, like this “Change Account” button

In a toolbar at the display block level, like these “Save” and “Cancel” buttons

In a floating toolbar, like these “Save” and “Cancel” buttons

In a templated list, like this “Contact” button

Development

Web component development

Component reference

rui-button

Module: rui-buttons - Package: @jkhy/responsive-ui-wc

Allows the user to trigger an action

Name	Type	Default	Description
text	string	''	Text displayed in the button.
buttonStyle	string	'secondary'	Specifies the styling displayed for the button: One of “primary”, “secondary”, or “destructive” Use a value of “secondary” for most buttons. Use a value of “primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block). Use a value of “destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.
buttonSize	string	'medium'	Specifies the relative size of the button: One of “medium” or “small” Use the default value of “medium” for most buttons. You can optionally use the “small” size for buttons in a toolbar if you’re looking for more compactness.
buttonType	string	'button'	Specifies the type of button: One of “button” or “submit” Use the default value of “button” for most buttons. Use a value of “submit” for a button that submits a form.
iconType	string	''	The name of the icon to display in an icon button. You can find a list of all enterprise icons here. The use of custom icons is also supported.
badge	string	''	Optional text that is highlighted in the top-right corner of the button. Often used to display a count of data items that can be accessed when the user presses the button.
isDisabled	boolean	false	Specifies whether the button is disabled.
rui-click	event		Event fired when the user presses the button.
context	string	''	This property is used internally. Leave it at its default value.

Implementation

Begin by importing the rui-buttons module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-buttons/rui-buttons-imports';

Use the rui-button component to implement a button. Specify the button’s text with the text property. Do not use the native HTML button element.

Button example

<rui-button text="Edit"></rui-button>

Define an rui-click event handler to perform an action when the button is pressed.

Button with rui-click event handler

<rui-button text="Edit" (rui-click)="startEditing()"></rui-button>

Use buttonStyle to specify the styling to use:

Leave this property at its default of “secondary” for most buttons.
Use a value of “primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block).
Use a value of “destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.

Bind isDisabled to a value of true to disable the button.

Buttons in Responsive UI almost always display text as their content, but you can also display icon buttons in limited cases. To display an icon as the button content, set the iconType property to one of the enterprise icon names. Use icon buttons sparingly, and only with standard icons that are very well understood by the user, such as print, edit, add-new, etc. You can find a list of all enterprise icons here.

Custom icons are also possible using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

Button with an icon

<rui-button iconType="edit" (rui-click)="startEditing()"></rui-button>

If you’re looking for more compactness for buttons in a toolbar, you can set the buttonSize property to a value of “small”. This button size should only be used for buttons in a toolbar.

Small button in a toolbar

<rui-button text="Detail" buttonSize="small"></rui-button>

Angular wrapper development

Wrapper reference

jha-button

Module: JhaButtonsModule - Package: @jkhy/responsive-ui-angular

Allows the user to trigger an action

Name	Type	Default	Description
jhaText	string	''	Text displayed in the button.
jhaButtonStyle	string	'Secondary'	Specifies the styling displayed for the button: One of “Primary”, “Secondary”, or “Destructive” Use a value of “Secondary” for most buttons. Use a value of “Primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block). Use a value of “Destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.
jhaButtonSize	string	'Medium'	Specifies the relative size of the button: One of “Medium”, “Small”, or “Large” Use the default value of “Medium” for most buttons. You can use the “Small” size for buttons in a toolbar if you’re looking for more compactness.
jhaButtonType	string	'button'	Specifies the type of button: One of “button” or “submit” Use the default value of “button” for most buttons. Use a value of “submit” for a button that submits a form.
jhaIconType	string	''	The name of the icon to display in an icon button. You can find a list of all enterprise icons here. The use of custom icons is also supported.
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the button
jhaBadge	string	''	Optional text that is highlighted in the top-right corner of the button. Often used to display a count of data items that can be accessed when the user presses the button.
jhaIsDisabled	boolean	false	Specifies whether the button is disabled.
jhaClick	event		Event fired when the user presses the button.
jhaRouterLink	string	''	If the button links to a view within the app, this specifies the route for that view.
jhaExternalUrl	string	''	If the button links to a URL outside of the app, this specifies the URL.
jhaExternalUrlInNewWindow	boolean	true	If the button links to a URL outside of the app, leave this at its default value of true if that link should open in a new tab/window, otherwise bind this to false.
jhaWidth	string	'auto'	Specifies the width of the button. Leave at the default value of ‘auto’ unless you need to specify a specific pixel or percentage width. Use CSS notation appropriate for the CSS “width” attribute.

jhaThrottleClick

Module: JhaResponsiveCoreModule - Package: @jkhy/responsive-ui-angular

Directive to prevent double click.

Name	Type	Default	Description
See jhaThrottleClick for details.

Implementation

Begin by importing the JhaButtonsModule module into your application.

Import the module

// import into app.module
import { JhaButtonsModule } from '@jkhy/responsive-ui-angular/jha-buttons';

@NgModule({
    imports: [
        ...
        JhaButtonsModule,
        ...
    ]
})

export class AppModule(){}

Use the jha-button component to implement a button. Specify the button’s text with the jhaText property. Do not use the native HTML button element.

Button example

<jha-button jhaText="Edit"></jha-button>

A button performs an action when pressed. Use one of the following properties to specify the action performed when the button is pressed.

If the button executes code, define a jhaClick event handler for it.
If the button links to a view within the app, specify the route for that view using the jhaRouterLink property.
If the button links to a URL outside of the app, specify the URL using the jhaExternalUrl property. Leave the jhaExternalUrlInNewWindow property at its default value of true if that link should open in a new tab/window, otherwise bind this property to a value of false.

Button with jha-click event handler

<jha-button jhaText="Edit" (jhaClick)="startEditing()"></jha-button>

Use jhaButtonStyle to specify the styling to use:

Leave this property at its default of “Secondary” for most buttons.
Use a value of “Primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block).
Use a value of “Destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.

Bind jhaIsDisabled to a value of true to disable the button.

Buttons in Responsive UI almost always display text as their content, but you can also display icon buttons in limited cases. To display an icon as the button content, set the jhaIconType property to one of the enterprise icon names. Use icon buttons sparingly, and only with standard icons that are very well understood by the user, such as print, edit, add-new, etc. You can find a list of all enterprise icons here.

Custom icons are also possible using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

Button with an icon

<jha-button jhaIconType="Edit" (jhaClick)="startEditing()"></jha-button>

Buttons typically auto-size to fit their content, but in certain cases you may want to define a specific width for the button. You can use the jhaWidth property to specify a specific pixel or percentage width. If you do this, use CSS notation appropriate for the CSS “width” attribute.

Button with 100% width

<jha-button jhaText="Customer Detail" jhaWidth="100%"></jha-button>

If you’re looking for more compactness for buttons in a toolbar, you can set the buttonSize property to a value of “small”. This button size should only be used for buttons in a toolbar.

Small button in a toolbar

<jha-button jhaText="Detail" jhaButtonSize="Small"></jha-button>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Buttons page in the Figma UI Kit.

Dev Component	Design Component Name
Text button	RUI / Buttons / Button Available values for the Style property: Primary Secondary Destructive Disabled Switch on the IconOnly property if the button only displays an icon.
Button badge	RUI / Buttons / Badge Available values for the Style property: Primary Secondary Destructive Disabled

Dev Component

Design Component Name

Text button

RUI / Buttons / Button

Available values for the Style property:

Primary
Secondary
Destructive
Disabled

Switch on the IconOnly property if the button only displays an icon.

Button badge

RUI / Buttons / Badge

Available values for the Style property:

Primary
Secondary
Destructive
Disabled

Change the button text to an appropriate value. Resize the button to fit the text, but be careful that you’re resizing the outer component and not an inner layer within the component.

The button badge is supported for text and icon buttons only. If you want to display a badge on a button, drag the button badge design component to the artboard, layer it above the button it will appear on, change its text to an appropriate value, then center the badge on the top-right corner of the button.

Note that hover effects on buttons are currently not included. We could technically include these for prototypes, but it would require you to set the text twice for every button: once for the normal state and again for the hover state. So for now, we’ve left out hover effects. You can still wire up click interactions on buttons though.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Buttons

Dev Component	Design Component Name
Text button - primary	JHA / Buttons / Button / Primary
Text button - secondary	JHA / Buttons / Button / Secondary
Text button - destructive	JHA / Buttons / Button / Destructive
Text button - disabled	JHA / Buttons / Button / Disabled
Icon button - primary	JHA / Buttons / Icon Button / Primary
Icon button - secondary	JHA / Buttons / Icon Button / Secondary
Icon button - destructive	JHA / Buttons / Icon Button / Destructive
Icon button - disabled	JHA / Buttons / Icon Button / Disabled
Button badge	JHA / Buttons / Badge

Change the button text to an appropriate value. Resize the button to fit the text, but be careful that you’re resizing the outer component and not an inner layer within the component.

The disabled state for all buttons and the on/off states for toggling buttons are internal states within the development components, but we have provided separate design components for these states for each type of button.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Sep 25 2024