Button Anatomy in the Plasma Design System

[Konqi]

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.

---

This is a companion discussion topic for the original entry at https://anditosan.wordpress.com/2025/10/10/button-anatomy-in-the-plasma-design-system/

[rokejulianlockhart]

@Konqi

Button Types

1. 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.
2. 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.

@Anditosan, I’ve yet to see any buttons not coloured by what kcm_colors exposes to KColorScheme. Do you know of any examples of coloured buttons?

@Konqi

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.

This doesn’t work when the user utilises a monochrome QPalette (or when the monochrome accessibility filter is applied), although I’ve no idea how to solve either.

@Konqi

4. 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.
5. 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.

The distinction between unbordered and bordered shouldn’t exist if invent.kde.org/teams/vdg/issues/-/issues/12 is resolved as the votes support.

@Konqi

Round Buttons: They only come in icon-only varieties.

bugs.kde.org/show_bug.cgi?id=462037#c1 makes this a little infeasible in practice, although that’s remediable. However, doesn’t that fundamentally contradict invent.kde.org/plasma/plasma-desktop/-/issues/59#note_673999, or does it merely describe defaults?

[Anditosan]

One thing to keep in mind is that these buttons do not work under current Plasma design. More work on the side of Union needs to happen for these buttons to be real. The colors used in these buttons and measurements are all design specs that require more changes in the Plasma system to be supported.