Button semantics

[inca]

• [ ] Consider only leaving btn--primary and btn--secondary semantics for button colors
• [ ] Consider adding btn--outline (if we need them)
• ~Consider making default button "frameless", so that it's rendered as "just an icon" (but preserving the button metrics)~ — make different component instead

[inca]

This seem to be abandoned. Is there any work planned towards standardizing button semantics? Without a concise set of components we will have more and more ad hoc ones with each iteration.

Just to list a few (not counting "special occurrences" like playback panels):

Description	Example
regular coloured buttons
different colours
"icon buttons", few different colours in use already, sometimes with colour-on-hover
"mode buttons"
"frameless buttons"
"outlined buttons"
navbar icon buttons + autocomplete caret
playback toolbar

Also, secondary button (in the way it is defined in CSS framework right now) does not appear on any specs.

[muzafarova]

nothing planned afaik but we should find time and move forward

@inca could you please take include "special occurrences" like playback panels as well?

It's fine that the secondary button is not in specs for UDF as long as it's used in other projects

[emmasalih]

Can i close this since Mark R is working on it?

[muzafarova]

Let's keep it until we we deliver v2.0.0! (soon)

[muzafarova]

The latest solution is 3 kinds of buttons:

• default (no special styling)
• button--primary (primary action within a context, only one per context) - blue background
• button--secondary (secondary action when applicable) - blue outline

Where blue is the primary call to action colour. It can be overridden using variables

For button sets there is an additional class button--accent to tint the button that is active (only one per set) - this is when applicable