Designing a Plume Button
A Plume Button is a pressable button that can optionally show a starting and ending icon.
This document describes the variants, elements, and slots your Plasmic component needs to have to be turned into a Plume Button.
Button Anatomy
Button Variants
Some variants that your Button component built in Plasmic should include are:
Variant | Description | Required? |
---|---|---|
isDisabled | Shows button in disabled state | Recommended |
showStartIcon | Shows an icon at the start of the button | Optional |
showEndIcon | Shows an icon at the end of the button | Optional |
In addition, you should consider styling the following interaction variants:
Interaction Variant | Description | Required? |
---|---|---|
Focus Visible | Control is focused via keyboard tabbing | Recommended |
Focused | Control is focused | Optional |
Hover | Button is hovered | Optional |
Pressed | Button is being pressed down | Optional |
Button elements
Some elements that should be in your Button component are:
Element | Description | Required? |
---|---|---|
root | The root element | Required |
Button slots
Some slots that your Button component should have are:
Slot | Description | Required? |
---|---|---|
content | Contains the main content of the button | Required |
startIcon | Contains the starting icon for the button | Optional |
endIcon | Contains the ending icon of the button | Optional |