Header Button
Overview
Use this component to display a simple button in your app header.
Only add header buttons to the right side of the header.
Development
Web component development
Component reference
rui-header-button
Simple button in right side of header bar
Name | Type | Default | Description |
---|---|---|---|
text | string | '' | Text displayed in the button |
iconType | string | '' | The name of the icon to display in the 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 to the right of the button text. Often used to display a count of data items that can be accessed when the user presses the button. |
route | string | '' | If the button links to a view within the app, assign the route for that view to this attribute. You must prefix the route with “/#” in Angular applications. |
isDisabled | boolean | false | Specifies whether the button is disabled. |
allowMixedCase | boolean | false | Our standard is for header buttons to uppercase their text. In certain rare cases, this uppercasing can be inappropriate. For example, the button text may refer to a product name that must include a lower case character for trademark purposes. In these rare cases, set this property to true to preserve mixed case for the button. |
Implementation
Begin by importing the rui-header
module into your application.
Use rui-header-button
for simple buttons in the header.
If the button simply links to another view, assign that view’s route to the button’s route
property.
Otherwise handle the button’s click
event.
The example below adds a simple button to the right side of the header that navigates to the Settings page.
Angular wrapper development
Wrapper reference
jha-header-button
Simple button in right side of header bar
Name | Type | Default | Description |
---|---|---|---|
jhaText | string | '' | Text displayed in the button |
jhaIconType | string | '' | The name of the icon to display in the button. You can find a list of all enterprise icons here. The use of custom icons is also supported. |
jhaTooltip | string | '' | Tooltip to display when the mouse hovers over the button |
jhaBadge | string | '' | Optional text that is highlighted to the right of the button text. Often used to display a count of data items that can be accessed when the user presses the button. |
jhaRouterLink | string | '' | If the button links to a view within the app, assign the route for that view to this attribute. If the button executes code, define a click event handler for it. Otherwise if the button links to a URL outside of the app, set the outside URL to the jhaExternalUrl attribute. |
jhaRouterLinkActiveOptions | object | {} | If the active router link options need to be set, use this attribute. Pass in an object just like you would for the routerLinkActiveOptions directive. For example: |
jhaExternalUrl | string | '' | If the button links to a view within the app, set its jhaRouterLink to the route for that view. If the button executes code, define a click event handler for it. Otherwise if the button links to a URL outside of the app, assign that URL to this attribute. |
jhaExternalUrlInNewWindow | boolean | true | If the button links to a URL outside of the app, set this to true if that link should be opened in a new tab/window. Otherwise bind this to a false value. |
jhaIsDisabled | boolean | false | Specifies whether the button is disabled. |
allowMixedCase | boolean | false | Our standard is for header buttons to uppercase their text. In certain rare cases, this uppercasing can be inappropriate. For example, the button text may refer to a product name that must include a lower case character for trademark purposes. In these rare cases, set this property to true to preserve mixed case for the button. |
Implementation
Begin by importing the JhaHeaderModule into your application.
Use jha-header-button
for simple buttons in the header.
If the button links to a view within the app, set its jhaRouterLink
to the route for that view. If the button executes code, define a click
event handler for it. Otherwise if the button links to a URL outside of the app, assign that URL to jhaExternalUrl
.
The example below adds a simple button to the right side of the header that navigates to the Settings page.
Component playground
Design
Figma design
Dev Component | Design Component Name |
---|---|
Header button | RUI / Header / Button Available values for the State property:
|
Header button badge | RUI / Header / Button Badge |
Adobe XD design
- Layout - Header, Expanded Nav, Function View
- Layout - Header, Collapsed Nav, Function View
- Layout - Nav Elements - Expanded Nav Bar
- Layout - Nav Elements - Collapsed Nav Bar
- Layout - Nav Mega Menu
- Layout - Header Elements – Basics
- Layout - Header Menu Buttons
- Layout - Header Mega Menu
- Layout - Mobile Application
- Layout - Tablet Application – Portrait
- Layout - Tablet Application - Landscape
Dev Component | Design Component Name |
---|---|
Header button - inactive | JHA / Header / Button / Inactive |
Header button - active | JHA / Header / Button / Active |