Actions
import Action from '@prism/action'; // cjs or esm module
import '@prism/styles/[theme]/action.css'; // styles
Under the Hood

Actions are <Button 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.

ReactHTML

with icon on right

ReactHTML

with icon on right and left

ReactHTML

Actions can group many Action components

ReactHTML

more than one

ReactHTML

with actions prop

ReactHTML

Actions adjust display count with the show prop

ReactHTML

with actions prop

ReactHTML

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.

ReactHTML

with actions prop

ReactHTML

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.

ReactHTML

with actions prop

ReactHTML

Actions menu opener label changes with the menuLabel prop

ReactHTML

Actions in the menu can be visibly separated

Similar actions can be grouped by a horizontal divider.

ReactHTML

with actions prop

ReactHTML

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"

ReactHTML

Align "center"

ReactHTML

Align "right" (default)

ReactHTML

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.

ReactHTML

Actions can be paired with different props

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

ReactHTML

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.

ReactHTML

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.

ReactHTML

Props

Actions

NameTypeDefaultDescription
actionobjectA single Action to be displayed. All keys are passed as props to the created Action.
actionsobject[]One or more Action elements to be displayed. All keys are passed as props to the created Action.
childrennodeAction and Actions.Spacer elements.
classNamestring
iconOnlyboolTurns off text labels for Actions visible outside of the menu.
menuAlignmentstring"right"Aligns the menu panel to the menu trigger.
menuLabelstring"More"Changes the menu trigger label.
textOnlyboolTurns off icons for Actions visible outside of the menu.
shownumber, "all"2Determines the number of Actions to display in addition to a menu trigger.
variantstringWill 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

NameTypeDefaultDescription
classNamestring
addOnPrependstringName of glyph to show before the label.
addOnAppendstringName of glyph to show after the label.
iconOnlyboolRemoves the label from the Action.
inlineboolRemoves minimum size constraints.
labelstringText to display in the Action.
textOnlyboolRemoves all icons from the Action.

Panel

NameTypeDefaultDescription
alignstring"left"Sets an alignment class leveraged by the Actions menu trigger.

Spacer

None available.