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 |