Loading...
 

History: Organization of button colors in Tiki

Preview of version: 6

The goal here is to make the meaning of button colors in Tiki more intuitive and consistent. In the Bootstrap update to version 4, part of Tiki 19, some button class names and default colors have changed from Bootstrap 3. (See https://getbootstrap.com/docs/4.0/components/buttons/ .) The meanings conveyed by button colors may not be as clear now as they were in Bootstrap 3, when the default button color was essentially neutral and colors were used for special meaning and, even with Tiki and Bootstrap 3, there wasn't a clear pattern of button color use.

For this reason, the button classes are being organized in the .tpl files, etc. and will be in the HTML and they will be most apparent in the Default Bootstrap theme. Other themes, of course, can style buttons as they please but the hope is that the organization of button colors makes sense and will benefit themes and users even if the themes' palettes vary from the Bootstrap default.

One suggestion is that sites could assign an admin theme that shows the button colors most clearly, and another site theme with perhaps less obvious colors that are toned down from the default ones.

Button purpose category Class and default color Examples
Make a significant change btn-primary (blue) Save, Apply, Rename, Select, Attach
Confirmation for non-destructive change btn-success (green) Anti-CSRF confirmation
Make a destructive change btn-danger (red) Delete
Confirmation for destructive change btn-warning (yellow) Are you sure?
Display information btn-info (cyan) History, Source, Preview, Find
Make an insignificant change btn-secondary (gray) Tabs/No tabs, Sort, Filter

  • In principle, links that are used for navigation should be styled as links (text only or text with icon), not as buttons. But there can be exceptions such as call to action buttons that also link to another page.
  • On pages or sites where there aren't many buttons, the button colors might seem random, but as the number of buttons and user interactions increases, then hopefully the color pattern will be more evident and useful from a UI standpoint.
  • For consistency this color scheme should be applied to icon buttons as well, like the magnifying-glass "search" icon and the "i" and "?" tooltip icons, in forms and so on, but not in an array like the admin icons where color consistency is more important.


Dev mailing list discussion starts here: https://sourceforge.net/p/tikiwiki/mailman/message/36346433/

Questions

Where is the limit between significant and insignificant changes?

Is it allowed to use btn-primary for confirming a non-destructive change, or to make a destructive change?

History

Advanced
Information Version
Tue 05 of Nov, 2019 12:23 GMT chibaguy Added info about prioritizing theme colors in buttons. 27
Wed 30 of Oct, 2019 11:30 GMT luci 25 - 26
Tue 29 of Oct, 2019 04:47 GMT chibaguy Updated Bootstrap doc link to point to latest version. 24
Tue 05 of Feb, 2019 14:08 GMT chibaguy Text edited for clarity and to update time references. 22 - 23
Tue 05 of Feb, 2019 12:58 GMT luci question about btn-secondary color 21
Sat 15 of Sep, 2018 17:47 GMT chibaguy Simplified button labels. 20
Sun 15 of Jul, 2018 04:38 GMT chibaguy Better color description for secondary. 17 - 19
Sat 14 of Jul, 2018 16:54 GMT chibaguy Moved example buttons to "CSS class, and color in Bootstrap default theme" column 16
Sat 14 of Jul, 2018 14:49 GMT Bsfez Changing button to html 15
Sat 14 of Jul, 2018 06:43 GMT Bsfez 13 - 14
Fri 13 of Jul, 2018 13:12 GMT Chealer9 fix sentence on links 12
Tue 26 of Jun, 2018 14:48 GMT Chealer9 11
Sun 24 of Jun, 2018 09:08 GMT chibaguy Added another button example. 8 - 10
Sun 24 of Jun, 2018 07:36 GMT chibaguy Added info and views. 7
Fri 22 of Jun, 2018 14:21 GMT chibaguy Turned off toc because the page is so short. 6
Thu 21 of Jun, 2018 17:15 GMT Chealer9 fix typo. oops 3 - 5
Thu 21 of Jun, 2018 14:54 GMT chibaguy Text clarification. 1 - 2

Switch Theme

Layout

Latest Changes

No records to display ...more

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config