Grid Button

Components > User Interaction > Grid Button

Use this component to...

Display a small non-bordered button within a responsive table or data grid cell

See this component in action...

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

Overview

If you need to include one or more buttons in a responsive table or grid cell, use one of the following button components. These components have minimal, lightweight formatting that fits well into a grid cell. These buttons display only an icon, with no text.

Use the simple grid button if you need to display up to 3 buttons in a grid cell. The grid button action must be easily recognized and understood when using one of our enterprise icons.

The grid button provides access to a single simple action within a grid cell.

Grid button example

Use the grid “more” button to roll up options in a dropdown that displays when the user presses the button. This button displays the Ellipsis ("…") icon. Use this component when you need to display more than around 3 buttons in a grid cell, or if there isn’t an easily recognizable enterprise icon to indicate a button’s action.

The grid “more” button provides access to multiple actions in a dropdown, within a grid cell.

Grid more button example

You can use these grid buttons in either the responsive table or the PrimeNg p-table data grid. These buttons are not currently supported in the ag-grid component.

Here are some guidelines for using grid buttons:

Do not display grid buttons in the same grid cell as data.
If a grid row includes more than one grid button, place them all in the same grid cell.
You’ll typically use either the simple grid button or the grid “more” button, but if for any reason you’re using both types of buttons in the same grid row, the grid “more” button should be to the right of all other grid buttons.
Never use more than one grid “more” button in the same grid row.
Grid buttons should typically display in the rightmost column of a grid row. One exception to this is if the grid row is too wide to fit and horizontal scrolling prevents the user from seeing the button. In this case you can put the cell with grid buttons on the left side of the grid. Note that if your grid includes an expand/collapse button in the leftmost column, any other grid buttons should display in a column somewhere to the right of that.
The simple grid button works well for actions that have an easily recognizable icon, such as “Edit” and “Delete”. If the button’s action can’t be readily understood with one of the enterprise icons, then use the grid “more” button and specify the text in the dropdown.
If you’re displaying up to about 3 options and have the space for it, you can use multiple simple grid buttons. Otherwise use the grid “more” button.

Development

Web component development

Component reference

rui-grid-button

rui-grid-button

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

Performs a simple action triggered from a grid cell.

	Name	Type	Default	Description
	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.
	isDisabled	boolean	false	Specifies whether the button is disabled.
	rui-click	event		Event fired when the user presses the button.
	custom-icon	slot		Slot for a custom icon.

rui-grid-more-button

rui-grid-more-button

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

Displays a dropdown menu with options when pressed, triggered from a grid cell.

	Name	Type	Default	Description
	alignment	string	'left'	One of “left” or “right”. Describes which button edge the menu aligns to. Use a value of “right” if the button is towards the far right edge of the grid and the dropdown menu is getting clipped on the right.
	isDisabled	boolean	false	Specifies whether the button is disabled.

rui-button-menu-option

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

Option in dropdown menu

	Name	Type	Default	Description
	text	string	''	Text displayed in the dropdown option
	isDisabled	boolean	false	Specifies whether the dropdown option is disabled.
	rui-menu-option-click	event		Event fired when the user presses the dropdown option.
	route	string	''	If the dropdown option links to a view within the app, this specifies the route for that view. You must prefix the route with “/#” in Angular applications.

rui-button-menu-template

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

Templated option in dropdown menu

	Name	Type	Default	Description
	isDisabled	boolean	false	Specifies whether the dropdown option is disabled.
	rui-menu-option-click	event		Event fired when the user presses the dropdown option.
	route	string	''	If the dropdown option links to a view within the app, this specifies the route for that view. You must prefix the route with “/#” in Angular applications.

rui-button-menu-separator

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

Separator between groups of options in dropdown menu

No properties or events

Implementation

You can use these grid buttons in either the PrimeNg p-table grid or the responsive table. These buttons are not currently supported in the ag-grid component.

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';

Add a new column to the grid header for the button cell. The grid buttons will be centered in their cell, so you should center the header title as well so it lines up nicely with the grid buttons.

Column header for button cell

<th class="rui-responsive-cell-center">
    Actions
</th>

Add a new column to each grid row to contain the grid button(s). Add the rui-grid-button-container CSS class to the grid cell’s element; this is important in order for the grid buttons to display properly.

Cell for button

<td class="rui-grid-button-container">
</td>

For simple grid buttons, add a rui-grid-button element to the cell. Specify its iconType and the action to perform when clicked. It can also be helpful to specify a tooltip for the button with the title property, since the button doesn’t display text.

Grid button

<td class="rui-grid-button-container">

    <rui-grid-button iconType="edit" title="Edit this item" (rui-click)="editItem()">
    </rui-grid-button>

</td>

For grid “more” buttons, nest instances of rui-button-menu-option within a rui-grid-more-button in the cell. Set alignment to a value of 'right' if the button appears at the right side of the grid; this aligns the dropdown menu to the right edge of the button. (Leave this property at its default value of 'left' otherwise.) It can also be helpful to specify a tooltip for the button with the title property, since the button doesn’t display text.

Grid 'more' button

<td class="rui-grid-button-container">

    <rui-grid-more-button alignment="Right" title="Options for this item">
        <rui-button-menu-option text="Edit" (rui-click)="editItem()"></rui-button-menu-option>
        <rui-button-menu-option text="Archive" (rui-click)="archiveItem()"></rui-button-menu-option>
        <rui-button-menu-option text="Delete" (rui-click)="deleteItem()"></rui-button-menu-option>
    </rui-grid-more-button>

</td>

Use the rui-button-menu-separator component if you need to separate options in the grid button’s dropdown menu into groups.

Menu separator

<td class="rui-grid-button-container">

    <rui-grid-more-button alignment="Right" title="Options for this item">
        <rui-button-menu-option text="Edit" (rui-click)="editItem()"></rui-button-menu-option>
        <rui-button-menu-option text="Archive" (rui-click)="archiveItem()"></rui-button-menu-option>
        <rui-button-menu-separator></rui-button-menu-separator>
        <rui-button-menu-option text="Delete" (rui-click)="deleteItem()"></rui-button-menu-option>
    </rui-grid-more-button>

</td>

In some (rare) cases you may need to display a template with multiple data in each dropdown option for a grid “more” button. Nest instances of rui-button-menu-template within rui-grid-more-button for this case. Embed the template for each option within the rui-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

Don't mix simple menu options with templated menu options in the same dropdown menu

Use either rui-button-menu-option or rui-button-menu-template, but not both in the same menu.

HTML for templated options

<td class="rui-grid-button-container">

    <rui-grid-more-button text="Grid 'More' Button with Templated Options">

        <rui-button-menu-template *ngFor="let account of accounts" (rui-click)="accountClick(account)">
            <div class="template-options">
                <div class="button-template-name">{{account.name}}</div>
                <div class="button-template-account-number rui-bright-text-label">{{account.number}}</div>
                <div class="button-template-account-desc">{{account.description}}</div>
            </div>
        </rui-button-menu-template>

    </rui-grid-more-button>

</td>

CSS for templated options

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Angular wrapper development

Wrapper reference

jha-grid-button

jha-grid-button

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

Performs a simple action triggered from a grid cell.

	Name	Type	Default	Description
	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 displayed when the mouse hovers over 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.
	custom-icon	slot		Slot for a custom icon.

jha-grid-more-button

jha-grid-more-button

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

Displays a dropdown menu with options when pressed, triggered from a grid cell.

	Name	Type	Default	Description
	jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the button
	jhaAlignment	string	'Left'	One of “Left” or “Right”. Describes which button edge the menu aligns to. Use a value of “Right” if the button is towards the far right edge of the grid and the dropdown menu is getting clipped on the right.
	jhaIsDisabled	boolean	false	Specifies whether the button is disabled.

jha-button-menu-option

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

Option in dropdown menu

	Name	Type	Default	Description
	jhaText	string	''	Text displayed in the dropdown option
	jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown option
	jhaIsDisabled	boolean	false	Specifies whether the dropdown option is disabled.
	jhaClick	event		If the dropdown option executes code, define a jhaClick event handler for it. IMPORTANT: Note that the event is jhaClick and not click.
	jhaRouterLink	string	''	If the dropdown option links to a view within the app, this specifies the route for that view.
	jhaExternalUrl	string	''	If the dropdown option links to a URL outside of the app, this specifies the URL.
	jhaExternalUrlInNewWindow	boolean	true	If the dropdown option 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.

jha-button-menu-template

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

Templated option in dropdown menu

	Name	Type	Default	Description
	jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown option
	jhaIsDisabled	boolean	false	Specifies whether the dropdown option is disabled.
	jhaClick	event		If the dropdown option executes code, define a jhaClick event handler for it. IMPORTANT: Note that the event is jhaClick and not click.
	jhaRouterLink	string	''	If the dropdown option links to a view within the app, this specifies the route for that view.
	jhaExternalUrl	string	''	If the dropdown option links to a URL outside of the app, this specifies the URL.
	jhaExternalUrlInNewWindow	boolean	true	If the dropdown option 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.

jha-button-menu-separator

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

Separator between groups of options in dropdown menu

No properties or events

Implementation

You can use these grid buttons in either the PrimeNg p-table grid or the responsive table. These buttons are not currently supported in the ag-grid component.

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(){}

Add a new column to the grid header for the button cell. The grid buttons will be centered in their cell, so you should center the header title as well so it lines up nicely with the grid buttons.

Column header for button cell

<th class="jha-responsive-cell-center">
    Actions
</th>

Add a new column to each grid row to contain the grid button(s). Add the jha-grid-button-container CSS class to the grid cell’s element; this is important in order for the grid buttons to display properly.

Cell for button

<td class="jha-grid-button-container">
</td>

For simple grid buttons, add a jha-grid-button element to the cell. Specify its jhaIconType and the action to perform when clicked. It can also be helpful to specify a tooltip for the button with the jhaTooltip property, since the button doesn’t display text.

Grid button

<td class="jha-grid-button-container">

    <jha-grid-button jhaIconType="Edit" jhaTooltip="Edit this item" (jhaClick)="editItem()">
    </jha-grid-button>

</td>

For grid “more” buttons, nest instances of jha-button-menu-option within a jha-grid-more-button in the cell. Set jhaAlignment to a value of 'Right' if the button appears at the right side of the grid; this aligns the dropdown menu to the right edge of the button. (Leave this property at its default value of 'Left' otherwise.) It can also be helpful to specify a tooltip for the button with the title property, since the button doesn’t display text.

Grid 'more' button

<td class="jha-grid-button-container">

    <jha-grid-more-button jhaAlignment="Right" jhaTooltip="Options for this item">

        <jha-button-menu-option jhaText="Edit" (jhaClick)="editItem()"></jha-button-menu-option>

        <jha-button-menu-option jhaText="Archive" (jhaClick)="archiveItem()"></jha-button-menu-option>

        <jha-button-menu-option jhaText="Delete" (jhaClick)="deleteItem()"></jha-button-menu-option>

    </jha-grid-more-button>

</td>

Use the jha-button-menu-separator component if you need to separate options in the grid button’s dropdown menu into groups.

Menu separator

<td class="jha-grid-button-container">

    <jha-grid-more-button jhaAlignment="Right" jhaTooltip="Options for this item">

        <jha-button-menu-option jhaText="Edit" (jhaClick)="editItem()"></jha-button-menu-option>

        <jha-button-menu-option jhaText="Archive" (jhaClick)="archiveItem()"></jha-button-menu-option>

        <jha-button-menu-separator></jha-button-menu-separator>

        <jha-button-menu-option jhaText="Delete" (jhaClick)="deleteItem()"></jha-button-menu-option>

    </jha-grid-more-button>

</td>

In some (rare) cases you may need to display a template with multiple data in each dropdown option for a grid “more” button. Nest instances of jha-button-menu-template within jha-grid-more-button for this case. Embed the template for each option within the jha-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

Don't mix simple menu options with templated menu options in the same dropdown menu

Use either jha-button-menu-option or jha-button-menu-template, but not both in the same menu.

HTML for templated options

<td class="jha-grid-button-container">

    <jha-grid-more-button jhaText="Dropdown Button with Templated Options">

        <jha-button-menu-template *ngFor="let account of accounts" (jhaClick)="accountClick(account)">
            <div class="template-options">
                <div class="button-template-name">{{account.name}}</div>
                <div class="button-template-account-number jha-bright-text-label">{{account.number}}</div>
                <div class="button-template-account-desc">{{account.description}}</div>
            </div>
        </jha-button-menu-template>

    </jha-grid-more-button>

</td>

CSS for templated options

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Component playground

Design

Figma design

See the Responsive table Figma design documentation if you’re adding a grid button or grid “more” button to a responsive table in a Figma design.
See the Data grid Figma design documentation if you’re adding a grid button or grid “more” button to a data grid in a Figma design.
See the Tree grid Figma design documentation if you’re adding a grid button or grid “more” button to a tree grid in a Figma design.

Adobe XD design

See the Responsive table Adobe XD design documentation if you’re adding a grid button or grid “more” button to a responsive table in an Adobe XD design.
See the Data grid Adobe XD design documentation if you’re adding a grid button or grid “more” button to a data grid in an Adobe XD design.
See the Tree grid Adobe XD design documentation if you’re adding a grid button or grid “more” button to a tree grid in an Adobe XD design.

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.

Did this page help you?

Last updated Thu Jun 12 2025