Button

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.

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.

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.

Usage

Buttons can be used in the following locations…

Development

Web component development

Component reference

rui-button

Implementation

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

// import into app.module
import '@jha/rui-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.

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

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

<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.

<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.

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

Angular component development

Component reference

jha-button

jhaThrottleClick

Implementation

Begin by importing the JhaButtonsModule module into your application.

// import into app.module
import { JhaButtonsModule } from '@jha/jharesponsive/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.

<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.

<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.

<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.

<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.

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

Component playground

Design

Figma design

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

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.

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.