Header Button

Components > Application Layout > Header Button

Use this component to...

Present a simple button in the right side of your application header

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

Module: rui-header - Package: @jha/rui-wc

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

Import the module

// import into app.module
import '@jha/rui-wc/components/rui-header/rui-header-imports';

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.

Using the component

<!-- Header: Defines application name and admin options that display in header -->
<rui-header [displaySearch]="true" searchWidth="50%" searchWatermarkText="SEARCH" (rui-header-search)="search($event)">

    <!-- Left side -->
    <rui-header-left [displayBackButton]="displayBackButton" (rui-back-button-click)="backButtonClicked()">

        <!-- Left side content -->

    </rui-header-left>

    <!-- Right side -->
    <rui-header-right>

        <!-- Settings -->
        <rui-header-button iconType="settings" text="Settings" route="/#/Settings"></rui-header-button>

    </rui-header-right>

</rui-header>

Angular component development

Component reference

jha-header-button

Module: JhaHeaderModule - Package: @jha/jharesponsive

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.
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: `[jhaRouterLinkActiveOptions]="{exact: true}"`
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.
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.

Import the module

// import into app.module
import { JhaHeaderModule } from '@jha/jharesponsive/jha-header';

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

export class AppModule(){}

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.

Using the component

<!-- Header: Defines application name and admin options that display in header -->
<jha-header [jhaIsHidden]="hideHeader" jhaDisplaySearch="true" jhaSearchWidth="50%"
 jhaSearchWatermarkText="SEARCH" (jhaSearch)="search($event)">

    <!-- Left side -->
    <jha-header-left [jhaDisplayBackButton]="displayBackButton" (jhaBackButtonClicked)="backButtonClicked()">

        <!-- Left side content -->

    </jha-header-left>

    <!-- Right side -->
    <jha-header-right>

        <!-- Settings -->
        <jha-header-button jhaIconType="settings" jhaText="Settings" jhaRouterLink="/Settings"></jha-header-button>

    </jha-header-right>

</jha-header>

Component playground

Design

Figma design

Figma design info

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

Dev Component	Design Component Name
Header button	RUI / Header / Button Available values for the State property: Inactive Active
Header button badge	RUI / Header / Button Badge

Dev Component

Design Component Name

Header button

RUI / Header / Button

Available values for the State property:

Inactive
Active

Header button badge

RUI / Header / Button Badge

Adobe XD design

Adobe XD design info

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

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

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 Feb 15 2023