More Button

Examples

HTML

<div id="more-button-container"></div>

JavaScript

const items = [
  {
    text: 'Function #1',
    onClick: () => notify('Clicked Dropdown Button Action 1'),
  },
  {
    text: 'Function #2',
    onClick: () => notify('Clicked Dropdown Button Action 2'),
  },
  {
    text: 'Disabled',
    disabled: true,
    onClick: () => notify('Clicked Dropdown Button Action 3'),
  },
];

hx.select('#more-button-container').set([
  hx.moreButton({ items }),
]);

More buttons are perfect for rendering where there are multiple actions to perform on a table row

	When used in a table, the more button styles are slightly different
	It is recommended to use a small button in a table to reduce row height

HTML

<p>More buttons are perfect for rendering where there are multiple actions to perform on a table row</p>
<table class="hx-flag-table hx-table">
  <tbody>
    <tr>
      <td>
        <span id="more-button-in-table"></span>
      </td>
      <td>
        When used in a table, the more button styles are slightly different
      </td>
    </tr>
    <tr>
      <td>
        <span id="more-button-in-table-small"></span>
      </td>
      <td>
        It is recommended to use a small button in a table to reduce row height
      </td>
    </tr>
  </tbody>
</table>

JavaScript

hx.select('#more-button-in-table').set([
  hx.moreButton({ items }),
]);

hx.select('#more-button-in-table-small').set([
  hx.moreButton({ items, size: 'small' }),
]);

Api

Change Log

Functions

hx.moreButtonoptionsObject

Creates a dropdown button using the updated style with an ellipsis arrow to indicate that more actions can be peformed.

Arguments

options

Properties

itemsArray[Item]

The array of items that should be shown in the dropdown.

[
  {
    text: 'Text to display',
    onClick: '/url?query=123',
  },
  {
    text: 'Text to display',
    onClick: myActionFunction,
  },
  {
    text: 'Text to display',
    onClick: myActionFunction,
    disabled: true,
  }
]

Item

Properties

disabledBoolean

Whether the item is disabled

Default: false

onClickString / Function

The URL or function to use when clicking the item in the dropdown.

When this is a string, the item will be converted to a hyperlink to allow better cross-platform support for things like 'open in new tab' (e.g. on touch devices)

textString

The text to display on the item in the dropdown

sizeString

The button size. Can be 'small' or 'micro'. undefined is the default 'normal' button size.

Default: undefined