Actions

Usage

Definition

Actions are functions that work like buttons but are styled like links. Actions can apply to a whole page (e.g. “Print”), or a component (e.g. “Add to Workbook”) or be nested in a menu.

Common Characteristics

Actions function like buttons but are styled like links. Actions have hover, focused and disabled states.

Options

Actions can be text or an icon or an icon + link pair. To preserve screen real estate actions can be placed in a menu. Action menus are opened with a label + down chevron (e.g. More ⌵, Actions ⌵, etc) or a kabob icon (⋮). Similar actions can be grouped in the menu using a horizontal divider. The Actions Menu is right-aligned with the action that opens it but can be left- or center-aligned.

Usage Guidelines

Use Action Menus to reduce clutter at the top of a page. Avoid more than two page-level actions.

Use Action Menus to reduce clutter on cards.

Actions that also indicate a status (e.g. Add to workbook or Set Lane Alert) should not be nested in a menu.

Examples

Page actions appear in the top-right of the screen.

Display no more than two actions on the page.

Nest actions in an Actions Menu when more than two are needed.

Design

Display no more than two utilities on the page.

Code

Actions are <Button variant="actionLink"/> elements with all props (other than those specified) passed through untouched. As such, onClick methods ought to be provided to each Action. This has been omitted in the examples for brevity.

Default Action

Icons can be appended to (placed before) or prepended to (placed after) the label. If no label, only the addOn(s) will show.

Live Editor

<Action addOnPrepend="info" label="Information" />

<Action addOnPrepend="info" label="Information" />

Result

with icon on right

Live Editor

<Action addOnAppend="printer" label="Print" />

<Action addOnAppend="printer" label="Print" />

Result

with icon on right and left

Live Editor

<Action addOnPrepend="chevron-left" addOnAppend="chevron-right" label="CODE" />

<Action addOnPrepend="chevron-left" addOnAppend="chevron-right" label="CODE" />

Result

Actions can group many Action components

Live Editor

<Actions>
  <Action addOnPrepend="info" label="Information" />
</Actions>

<Actions>
  <Action addOnPrepend="info" label="Information" />
</Actions>

Result

more than one

Live Editor

<Actions>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

<Actions>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

Result

with `actions` prop

Live Editor

<Actions actions={[
  {
    addOnPrepend: 'error-triangle',
    label: 'Error Triangle',
  },
  {
    addOnPrepend: 'fork-spoon',
    label: 'Fork Spoon',
  },
  {
    addOnPrepend: 'heart',
    label: 'Heart',
  },
  {
    addOnPrepend: 'shield-check',
    label: 'Sheild Check',
  },
  {
    addOnPrepend: 'unlink',
    label: 'Unlink',
  },
]} />

<Actions actions={[
  {
    addOnPrepend: 'error-triangle',
    label: 'Error Triangle',
  },
  {
    addOnPrepend: 'fork-spoon',
    label: 'Fork Spoon',
  },
  {
    addOnPrepend: 'heart',
    label: 'Heart',
  },
  {
    addOnPrepend: 'shield-check',
    label: 'Sheild Check',
  },
  {
    addOnPrepend: 'unlink',
    label: 'Unlink',
  },
]} />

Result

Actions adjust display count with the `show` prop

Live Editor

<Actions show={3}>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

<Actions show={3}>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

Result

with `actions` prop

Live Editor

<Actions show={3} actions={[
  {
    addOnPrepend: 'error-triangle',
    label: 'Error Triangle',
  },
  {
    addOnPrepend: 'fork-spoon',
    label: 'Fork Spoon',
  },
  {
    addOnPrepend: 'heart',
    label: 'Heart',
  },
  {
    addOnPrepend: 'shield-check',
    label: 'Sheild Check',
  },
  {
    addOnPrepend: 'unlink',
    label: 'Unlink',
  },
]} />

<Actions show={3} actions={[
  {
    addOnPrepend: 'error-triangle',
    label: 'Error Triangle',
  },
  {
    addOnPrepend: 'fork-spoon',
    label: 'Fork Spoon',
  },
  {
    addOnPrepend: 'heart',
    label: 'Heart',
  },
  {
    addOnPrepend: 'shield-check',
    label: 'Sheild Check',
  },
  {
    addOnPrepend: 'unlink',
    label: 'Unlink',
  },
]} />

Result

Actions adjust text display with `iconOnly` prop

The iconOnly prop only affects the shown actions. All actions in the menu will display with complete icons and labels.

Live Editor

<Actions iconOnly>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

<Actions iconOnly>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

Result

with `actions` prop

Live Editor

<Actions
  iconOnly
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    },
  ]}
/>

<Actions
  iconOnly
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    },
  ]}
/>

Result

Actions adjust icon display with `textOnly` prop

The textOnly prop only affects the shown actions. All actions in the menu will display with complete icons and label.

Live Editor

<Actions textOnly>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

<Actions textOnly>
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

Result

with `actions` prop

Live Editor

<Actions
  textOnly
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    },
  ]}
/>

<Actions
  textOnly
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    },
  ]}
/>

Result

Actions menu opener label changes with the `menuLabel` prop

Live Editor

<Actions
  menuLabel="Page Actions"
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    },
  ]}
/>

<Actions
  menuLabel="Page Actions"
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    },
  ]}
/>

Result

Similar actions can be grouped by a horizontal divider.

Live Editor

<Actions show={0} menuLabel="Page Actions">
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Actions.Spacer />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Actions.Spacer />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

<Actions show={0} menuLabel="Page Actions">
  <Action addOnPrepend="error-triangle" label="Error Triangle" />
  <Actions.Spacer />
  <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
  <Action addOnPrepend="heart" label="Heart" />
  <Actions.Spacer />
  <Action addOnPrepend="shield-check" label="Sheild Check" />
  <Action addOnPrepend="unlink" label="Unlink" />
</Actions>

Result

with `actions` prop

Live Editor

<Actions
  show={0}
  menuLabel="Page Actions"
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    { spacer: true },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    { spacer: true },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    }
  ]}
/>

<Actions
  show={0}
  menuLabel="Page Actions"
  actions={[
    {
      addOnPrepend: 'error-triangle',
      label: 'Error Triangle',
    },
    { spacer: true },
    {
      addOnPrepend: 'fork-spoon',
      label: 'Fork Spoon',
    },
    {
      addOnPrepend: 'heart',
      label: 'Heart',
    },
    { spacer: true },
    {
      addOnPrepend: 'shield-check',
      label: 'Sheild Check',
    },
    {
      addOnPrepend: 'unlink',
      label: 'Unlink',
    }
  ]}
/>

Result

Actions align menu with `menuAlignment` prop

menuAlignment pertains to the alignment of the link menu in relation to the opener button. Menu will always be either above or below the trigger depending on the available visible space and will align to the right edge by default.

Align `"left"`

Live Editor

<Container style={{ textAlign: 'center' }}>
  <Actions
    show={0}
    menuAlignment="left"
    menuLabel="Page Actions"
  >
    <Action addOnPrepend="heart-o" label="Add page to Workbook" />
    <Actions.Spacer />
    <Action addOnPrepend="printer" label="Print current view" />
    <Action addOnPrepend="printer" label="Print run list" />
    <Actions.Spacer />
    <Action addOnPrepend="envelope" label="Email run list" />
    <Action addOnPrepend="file-excel" label="Export to Excel" />
    <Actions.Spacer />
    <Action addOnPrepend="clipboard-checked" label="Really long Action name in a Panel" />
  </Actions>
</Container>

<Container style={{ textAlign: 'center' }}>
  <Actions
    show={0}
    menuAlignment="left"
    menuLabel="Page Actions"
  >
    <Action addOnPrepend="heart-o" label="Add page to Workbook" />
    <Actions.Spacer />
    <Action addOnPrepend="printer" label="Print current view" />
    <Action addOnPrepend="printer" label="Print run list" />
    <Actions.Spacer />
    <Action addOnPrepend="envelope" label="Email run list" />
    <Action addOnPrepend="file-excel" label="Export to Excel" />
    <Actions.Spacer />
    <Action addOnPrepend="clipboard-checked" label="Really long Action name in a Panel" />
  </Actions>
</Container>

Result

Align `"center"`

Live Editor

<Container style={{ textAlign: 'center' }}>
  <Actions
    show={0}
    menuAlignment="center"
    menuLabel="Page Actions"
  >
    <Action addOnPrepend="heart-o" label="Add page to Workbook" />
    <Actions.Spacer />
    <Action addOnPrepend="printer" label="Print current view" />
    <Action addOnPrepend="printer" label="Print run list" />
    <Actions.Spacer />
    <Action addOnPrepend="envelope" label="Email run list" />
    <Action addOnPrepend="file-excel" label="Export to Excel" />
    <Actions.Spacer />
    <Action addOnPrepend="clipboard-checked" label="Really long Action name in a Panel" />
  </Actions>
</Container>

<Container style={{ textAlign: 'center' }}>
  <Actions
    show={0}
    menuAlignment="center"
    menuLabel="Page Actions"
  >
    <Action addOnPrepend="heart-o" label="Add page to Workbook" />
    <Actions.Spacer />
    <Action addOnPrepend="printer" label="Print current view" />
    <Action addOnPrepend="printer" label="Print run list" />
    <Actions.Spacer />
    <Action addOnPrepend="envelope" label="Email run list" />
    <Action addOnPrepend="file-excel" label="Export to Excel" />
    <Actions.Spacer />
    <Action addOnPrepend="clipboard-checked" label="Really long Action name in a Panel" />
  </Actions>
</Container>

Result

Align `"right"` (default)

Live Editor

<Container style={{ textAlign: 'center' }}>
  <Actions
    show={0}
    menuAlignment="right"
    menuLabel="Page Actions"
  >
    <Action addOnPrepend="heart-o" label="Add page to Workbook" />
    <Actions.Spacer />
    <Action addOnPrepend="printer" label="Print current view" />
    <Action addOnPrepend="printer" label="Print run list" />
    <Actions.Spacer />
    <Action addOnPrepend="envelope" label="Email run list" />
    <Action addOnPrepend="file-excel" label="Export to Excel" />
    <Actions.Spacer />
    <Action addOnPrepend="clipboard-checked" label="Really long Action name in a Panel" />
  </Actions>
</Container>

<Container style={{ textAlign: 'center' }}>
  <Actions
    show={0}
    menuAlignment="right"
    menuLabel="Page Actions"
  >
    <Action addOnPrepend="heart-o" label="Add page to Workbook" />
    <Actions.Spacer />
    <Action addOnPrepend="printer" label="Print current view" />
    <Action addOnPrepend="printer" label="Print run list" />
    <Actions.Spacer />
    <Action addOnPrepend="envelope" label="Email run list" />
    <Action addOnPrepend="file-excel" label="Export to Excel" />
    <Actions.Spacer />
    <Action addOnPrepend="clipboard-checked" label="Really long Action name in a Panel" />
  </Actions>
</Container>

Result

The container here is for illustrative purposes only.

Actions can be updated externally

In the following example, the labelState will update on any click of any of the Action buttons. The state is visible in the labels as On or Off and update as the buttons are interacted upon.

Live Editor

() => {
  const [labelState, setLabelState] = React.useState(false)

  const handleClick = () => {
    setLabelState(!labelState)
  }

  const label = (name) => `${name} ${labelState ? 'Off' : 'On'}`

  return (
    <>
      <Actions show={3}>
        <Action label={label('wifi')} onClick={handleClick} addOnPrepend="wifi" />
        <Action label={label('truck')} onClick={handleClick} addOnPrepend="truck" />
        <Action label={label('trash')} onClick={handleClick} addOnPrepend="trash" />
        <Action label={label('home')} onClick={handleClick} addOnPrepend="home" />
        <Action label={label('medal')} onClick={handleClick} addOnPrepend="medal" />
      </Actions>

      <Actions show={1} actions={[{
         addOnAppend: 'search',
         label: `search ${labelState ? 'Off' : 'On'}`,
         onClick: handleClick,
       }, {
         addOnAppend: 'fuel',
         label: `fuel ${labelState ? 'Off' : 'On'}`,
         onClick: handleClick,
       }, {
         addOnAppend: 'pin',
         label: `pin ${labelState ? 'Off' : 'On'}`,
         onClick: handleClick,
       },]} />
    </>
  );
}

() => {
  const [labelState, setLabelState] = React.useState(false)

  const handleClick = () => {
    setLabelState(!labelState)
  }

  const label = (name) => `${name} ${labelState ? 'Off' : 'On'}`

  return (
    <>
      <Actions show={3}>
        <Action label={label('wifi')} onClick={handleClick} addOnPrepend="wifi" />
        <Action label={label('truck')} onClick={handleClick} addOnPrepend="truck" />
        <Action label={label('trash')} onClick={handleClick} addOnPrepend="trash" />
        <Action label={label('home')} onClick={handleClick} addOnPrepend="home" />
        <Action label={label('medal')} onClick={handleClick} addOnPrepend="medal" />
      </Actions>

      <Actions show={1} actions={[{
         addOnAppend: 'search',
         label: `search ${labelState ? 'Off' : 'On'}`,
         onClick: handleClick,
       }, {
         addOnAppend: 'fuel',
         label: `fuel ${labelState ? 'Off' : 'On'}`,
         onClick: handleClick,
       }, {
         addOnAppend: 'pin',
         label: `pin ${labelState ? 'Off' : 'On'}`,
         onClick: handleClick,
       },]} />
    </>
  );
}

Result

Actions can be paired with different props

This example shows how two different and unique actions may be used in a component.

Live Editor

<>
  <Container style={{
    width: 350,
    boxShadow: '0 0 4px 0 #babcbe',
  }} className="my-2 rounded">
    <Row>
      <Col className="p-0">
        <img src="https://placedog.net/350/262" className="rounded-top" />
      </Col>
    </Row>
    <Row>
      <Col className="p-2">
        <strong>Card Title</strong>
        <p>Lorem ipsum dolor sit amet, consec tetur adiplscing elit.</p>
      </Col>
    </Row>
    <Row className="border-top border-light">
      <Col className="justify-content-start p-0">
        <Actions textOnly>
          <Action label="Action 1" />
        </Actions>
      </Col>
      <Col className="justify-content-end p-0">
        <Actions iconOnly show={1}>
          <Action label="Action 2" addOnPrepend="bell" />
          <Action label="Action 3" addOnPrepend="bell-o" />
          <Action label="Action 4" addOnPrepend="eye-blocked" />
          <Action label="Action 5" addOnPrepend="plus" />
        </Actions>
      </Col>
    </Row>
  </Container>
</>

<>
  <Container style={{
    width: 350,
    boxShadow: '0 0 4px 0 #babcbe',
  }} className="my-2 rounded">
    <Row>
      <Col className="p-0">
        <img src="https://placedog.net/350/262" className="rounded-top" />
      </Col>
    </Row>
    <Row>
      <Col className="p-2">
        <strong>Card Title</strong>
        <p>Lorem ipsum dolor sit amet, consec tetur adiplscing elit.</p>
      </Col>
    </Row>
    <Row className="border-top border-light">
      <Col className="justify-content-start p-0">
        <Actions textOnly>
          <Action label="Action 1" />
        </Actions>
      </Col>
      <Col className="justify-content-end p-0">
        <Actions iconOnly show={1}>
          <Action label="Action 2" addOnPrepend="bell" />
          <Action label="Action 3" addOnPrepend="bell-o" />
          <Action label="Action 4" addOnPrepend="eye-blocked" />
          <Action label="Action 5" addOnPrepend="plus" />
        </Actions>
      </Col>
    </Row>
  </Container>
</>

Result

Card Title

Lorem ipsum dolor sit amet, consec tetur adiplscing elit.

Actions can be modified with display variants

Variant `list`

This example shows how to display the actions in a vertical manner, still allowing for a "more" menu to show if desired.

Live Editor

<Card width="320">
  <Actions variant="list" show={3}>
    <Action addOnPrepend="error-triangle" label="Error Triangle" />
    <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
    <Action addOnPrepend="heart" label="Heart" />
    <Action addOnPrepend="shield-check" label="Sheild Check" />
    <Action addOnPrepend="unlink" label="Unlink" />
  </Actions>
</Card>

<Card width="320">
  <Actions variant="list" show={3}>
    <Action addOnPrepend="error-triangle" label="Error Triangle" />
    <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
    <Action addOnPrepend="heart" label="Heart" />
    <Action addOnPrepend="shield-check" label="Sheild Check" />
    <Action addOnPrepend="unlink" label="Unlink" />
  </Actions>
</Card>

Result

Variant `panel-list`

This example shows how to display the actions in a vertical manner which mimics the "more" panel, still allowing for a "more" menu to show if desired.

Live Editor

<Card width="320" gutter="none" className="py-2">
  <Actions variant="panel-list" show={3}>
    <Action addOnPrepend="error-triangle" label="Error Triangle" />
    <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
    <Action addOnPrepend="heart" label="Heart" />
    <Action addOnPrepend="shield-check" label="Sheild Check" />
    <Action addOnPrepend="unlink" label="Unlink" />
  </Actions>
</Card>

<Card width="320" gutter="none" className="py-2">
  <Actions variant="panel-list" show={3}>
    <Action addOnPrepend="error-triangle" label="Error Triangle" />
    <Action addOnPrepend="fork-spoon" label="Fork Spoon" />
    <Action addOnPrepend="heart" label="Heart" />
    <Action addOnPrepend="shield-check" label="Sheild Check" />
    <Action addOnPrepend="unlink" label="Unlink" />
  </Actions>
</Card>

Result

Props

Actions

Name	Type	Default	Description
action	`object`		A single Action to be displayed. All keys are passed as props to the created Action.
actions	`object`	`[]`	One or more Action elements to be displayed. All keys are passed as props to the created Action.
children	`node`		Action and Actions.Spacer elements.
className	`string`
iconOnly	`bool`		Turns off text labels for Actions visible outside of the menu.
menuAlignment	`string`	`"right"`	Aligns the menu panel to the menu trigger.
menuLabel	`string`	`"More"`	Changes the menu trigger label.
textOnly	`bool`		Turns off icons for Actions visible outside of the menu.
show	`number`, `"all"`	`2`	Determines the number of Actions to display in addition to a menu trigger.
variant	`string`		Will change the display to either `list` or `panel-list`. `panel-list` is used to mimic the hover states of the actions in the "more" panel.

Action

Name	Type	Description
className	`string`
addOnPrepend	`string`	Name of glyph to show before the label.
addOnAppend	`string`	Name of glyph to show after the label.
iconOnly	`bool`	Removes the label from the Action.
inline	`bool`	Removes minimum size constraints.
label	`string`	Text to display in the Action.
textOnly	`bool`	Removes all icons from the Action.

Panel

Name	Type	Default	Description
align	`string`	`"left"`	Sets an alignment class leveraged by the Actions menu trigger.

Spacer

None available.

Usage​

Definition​

Common Characteristics​

Options​

Usage Guidelines​

Examples​

Design​

Code​

Default Action​

with icon on right​

with icon on right and left​

Actions can group many Action components​

more than one​

with actions prop​

Actions adjust display count with the show prop​

with actions prop​

Actions adjust text display with iconOnly prop​

with actions prop​

Actions adjust icon display with textOnly prop​

with actions prop​

Actions menu opener label changes with the menuLabel prop​

Actions in the menu can be visibly separated​

with actions prop​

Actions align menu with menuAlignment prop​

Align "left"​

Align "center"​

Align "right" (default)​

Actions can be updated externally​

Actions can be paired with different props​

Actions can be modified with display variants​

Variant list​

Variant panel-list​

Props​

Actions​

Action​

Panel​

Spacer​

Usage

Definition

Common Characteristics

Options

Usage Guidelines

Examples

Design

Code

Default Action

with icon on right

with icon on right and left

Actions can group many Action components

more than one

with `actions` prop

Actions adjust display count with the `show` prop

with `actions` prop

Actions adjust text display with `iconOnly` prop

with `actions` prop

Actions adjust icon display with `textOnly` prop

with `actions` prop

Actions menu opener label changes with the `menuLabel` prop

Actions in the menu can be visibly separated

with `actions` prop

Actions align menu with `menuAlignment` prop

Align `"left"`

Align `"center"`

Align `"right"` (default)

Actions can be updated externally

Actions can be paired with different props

Actions can be modified with display variants

Variant `list`

Variant `panel-list`

Props

Actions

Action

Panel

Spacer