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:

isDisabledShows button in disabled stateRecommended
showStartIconShows an icon at the start of the buttonOptional
showEndIconShows an icon at the end of the buttonOptional

In addition, you should consider styling the following interaction variants:

Interaction VariantDescriptionRequired?
Focus VisibleControl is focused via keyboard tabbingRecommended
FocusedControl is focusedOptional
HoverButton is hoveredOptional
PressedButton is being pressed downOptional

Button elements

Some elements that should be in your Button component are:

rootThe root elementRequired

Button slots

Some slots that your Button component should have are:

contentContains the main content of the buttonRequired
startIconContains the starting icon for the buttonOptional
endIconContains the ending icon of the buttonOptional