Developer Programs

Learn

Docs

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
rui-header-button
Module: rui-header - Package: @jkhy/responsive-ui-wc

Simple button in right side of header bar

NameTypeDefaultDescription
textstring''Text displayed in the button
iconTypestring''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.
badgestring''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.
routestring''

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.

isDisabledbooleanfalseSpecifies whether the button is disabled.
allowMixedCasebooleanfalseOur 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 '@jkhy/responsive-ui-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 wrapper development

Wrapper reference

jha-header-button
jha-header-button
Module: JhaHeaderModule - Package: @jkhy/responsive-ui-angular

Simple button in right side of header bar

NameTypeDefaultDescription
jhaTextstring''Text displayed in the button
jhaIconTypestring''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.
jhaTooltipstring''Tooltip to display when the mouse hovers over the button
jhaBadgestring''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.
jhaRouterLinkstring''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.
jhaRouterLinkActiveOptionsobject{}

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}"

jhaExternalUrlstring''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.
jhaExternalUrlInNewWindowbooleantrueIf 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.
jhaIsDisabledbooleanfalseSpecifies whether the button is disabled.
allowMixedCasebooleanfalseOur 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 '@jkhy/responsive-ui-angular/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 ComponentDesign Component Name
Header button

RUI / Header / Button

Available values for the State property:

  • Inactive
  • Active
Header button badgeRUI / 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 ComponentDesign Component Name
Header button - inactiveJHA / Header / Button / Inactive
Header button - activeJHA / 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 Sep 25 2024