<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.
Icons can be appended to (placed before) or prepended to (placed after) the label. If no label, only the addOn(s) will show.
with icon on right
with icon on right and left
Actions can group many Action components
more than one
Actions adjust display count with the
Actions adjust text display with
iconOnly prop only affects the shown actions. All actions in the menu will
display with complete icons and labels.
Actions adjust icon display with
textOnly prop only affects the shown actions. All actions in the menu will
display with complete icons and label.
Actions menu opener label changes with the
Actions in the menu can be visibly separated
Similar actions can be grouped by a horizontal divider.
Actions align menu with
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.
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
update as the buttons are interacted upon.
Actions can be paired with different props
This example shows how two different and unique actions may be used in a component.
Actions can be modified with display variants
This example shows how to display the actions in a vertical manner, still allowing for a "more" menu to show if desired.
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.
|action||A single Action to be displayed. All keys are passed as props to the created Action.|
|actions||One or more Action elements to be displayed. All keys are passed as props to the created Action.|
|children||Action and Actions.Spacer elements.|
|iconOnly||Turns off text labels for Actions visible outside of the menu.|
|menuAlignment||Aligns the menu panel to the menu trigger.|
|menuLabel||Changes the menu trigger label.|
|textOnly||Turns off icons for Actions visible outside of the menu.|
|show||Determines the number of Actions to display in addition to a menu trigger.|
|variant||Will change the display to either |
|addOnPrepend||Name of glyph to show before the label.|
|addOnAppend||Name of glyph to show after the label.|
|iconOnly||Removes the label from the Action.|
|inline||Removes minimum size constraints.|
|label||Text to display in the Action.|
|textOnly||Removes all icons from the Action.|
|align||Sets an alignment class leveraged by the Actions menu trigger.|