Friday, 10 October 2025
anditosanButtons in the Plasma Design System
Buttons play a pivotal role in user interaction within the Plasma Design System. It provides a set of states and roles for clear actions and navigation. In this design system, buttons are categorized into various types, each with distinct styles and purposes, contributing to an intuitive user experience.
Buttons are probably the most used component in a UI and it needs to clearly convey its meaning and purpose.
Button Types
- Primary Buttons: These buttons are the primary interactive elements, designed to stand out on the interface with a shadow effect that creates a sense of depth. They are used for essential actions like “Create,” “Confirm,” or “Proceed,” encouraging user engagement. The elevation can adapt to the background color, ensuring good visibility across different surfaces. Default buttons are identified by their distinct brand color and are used sparsely in the UI.
- Secondary Color: Provide an alternative action option. They often complement the primary buttons, allowing users to execute actions that may not be the main focus but are still significant. These buttons usually have a less prominent visual hierarchy, helping to guide user interactions without overshadowing primary actions. They can also serve for less urgent or secondary tasks, improving the overall user experience in UI design. They also come in Secondary Color, which is likely the most used version of the button in a UI.
- Outlined Buttons: Outlined buttons are a secondary option, featuring a transparent background and a defined border. They serve as supplementary actions that are less critical than default buttons, maintaining clarity without overshadowing primary actions. They come in color and gray versions depending on their usage.
- Text Buttons: Also known as flat buttons, these are used for less prominent actions or in placements where space is limited. Text buttons have no elevation or border, displaying a subtle underline on hover to indicate interactivity. They are effective for actions like “Learn more” or “Cancel,” blending harmoniously with text-based interactions.
States and Feedback
In Plasma Design, buttons incorporate multiple interaction states to provide immediate feedback to users:
- Default: Displaying the button’s primary style with appropriate color contrast.
- Hover: Changing background color slightly or applying a ripple effect, signaling potential interaction.
- Selected: Is a button that indicates it is currently active or chosen among a group of options. Its visual state (such as color, elevation, or outline) changes to show that it’s the selected or focused choice. Selected state is permanent and does not need the user to keep the mouse over it. The selection is removed when another UI element is selected.
- Pressed: A visual response when the button is actively being clicked, often shown by a darker shade or scale effect, reinforcing the tactile feel of the interface. It is a temporary state shown when the user clicks a button, for example.
- Disabled: Buttons in this state are visually muted and unresponsive, maintaining clarity that the action cannot be taken. There are disabled button versions for color and gray colorings.
- Round Buttons: Are used for additional visual interest and to draw differences between buttons and actions that are part of the general UI or external to it. They only come in icon-only varieties.
Accessibility and Responsiveness
Buttons should convey their functions through clear labeling and icons where applicable. Together they should have sufficient contrast between button colors and the background is essential for readability.
Implementation Guidelines
From a development standpoint, buttons in Plasma Design system should be structured as modular components. They need to utilize a consistent naming convention aligned with the design tokens defined in the system, such as button.primary or button.outlined. This approach promotes reusability and maintainability across the codebase. Incorporating customization options, such as size variations and whether to include icons, allows developers to create a diverse set of buttons while ensuring adherence to the material aesthetic.
The design system contains primary-derivative buttons and danger-related versions as well. Danger or destructive button states mirror the ones from the primary color but are dedicated for potentially damaging consequences in a system.
Internally, buttons contain color variables, shadow variables, text variables and spacing variables thus:
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZJhiI2B.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZthiI2B.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZNhiI2B.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZxhiI2B.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZBhiI2B.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZFhiI2B.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url(https://design.penpot.app/internal/gfonts/font/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYAZ9hiA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {
margin: 0;
min-height: 100%;
min-width: 100%;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
min-height: 100vh;
}
* {
box-sizing: border-box;
}
.text-node { background-clip: text !important; -webkit-background-clip: text !important; }
/* Button */
.button-ef52f83471d2 {
position: relative;
width: 105px;
height: 34px;
border-radius: 0px 0px 0px 0px;
z-index: 0;
}
/* _ButtonBase */
.button-bas-ef52f83471d3 {
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: auto;
background: #4172deFF;
border: 1px solid #4172deFF;
border-radius: 6px 6px 6px 6px;
box-shadow: 0px 2px 4px -2px #dedede54, 0px 12px 12px -8px #dededeFF, inset 0px -4px 12px -8px #0020461F;
display: flex;
align-items: center;
align-content: stretch;
justify-content: center;
gap: 8px;
padding: 8px 14px 8px 14px;
flex-direction: row;
flex-wrap: nowrap;
}
/* Button CTA */
.button-c-t-a-ef52f83471d4 {
height: 18px;
flex-shrink: 0;
}
.button-c-t-a-ef52f83471d4 .root-0 {
display: flex;
white-space: break-spaces;
align-items: flex-start;
}
.button-c-t-a-ef52f83471d4 .root-0-paragraph-set-0 {
display: inline-flex;
flex-direction: column;
justify-content: inherit;
margin-right: 1px;
vertical-align: top;
}
.button-c-t-a-ef52f83471d4 .root-0-paragraph-set-0-paragraph-0 {
font-size: 0;
line-height: 1.25;
margin: 0;
text-align: left;
}
.button-c-t-a-ef52f83471d4 .root-0-paragraph-set-0-paragraph-0-text-0 {
color: rgba(250, 248, 255, 1);
text-transform: none;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 14px;
text-rendering: geometricPrecision;
caret-color: rgba(250, 248, 255, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "Inter";
font-style: normal;
font-weight: 600;
}<!-- frame: Button -->
<div class="frame button-ef52f83471d2">
<!-- frame: _ButtonBase -->
<div class="frame button-bas-ef52f83471d3">
<!-- text: Button CTA -->
<div class="shape text button-c-t-a-ef52f83471d4">
<div class="text-node-html" id="html-text-node-26931f38-d193-8030-8006-ef52f83471d4" data-x="821" data-y="637">
<div class="root rich-text root-0" xmlns="http://www.w3.org/1999/xhtml">
<div class="paragraph-set root-0-paragraph-set-0">
<p class="paragraph root-0-paragraph-set-0-paragraph-0" dir="ltr"><span class="text-node root-0-paragraph-set-0-paragraph-0-text-0">Button CTA</span></p>
</div>
</div>
</div>
</div>
</div>
</div>As the design process progresses, these internal variables will make more sense. While today, Plasma Design is manually implemented, in the future, we see that developers would not need to interact with the button design directly and just implement the desired action.
.
@srisharan_v_s:matrix.org
