Loading...
 

History: Organization of button colors in Tiki

Preview of version: 24

The goal here is to make the meaning of button colors in Tiki more intuitive and consistent, at least in the Bootstrap Default theme, as a baseline. Of course every theme has its own color palette and button colors vary from the default.

In Bootstrap 4, which is integrated into Tiki 19 and newer, some button class names and default colors have changed from Bootstrap 3. (See https://getbootstrap.com/docs/4.3/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 CSS class, and color in Bootstrap default theme Examples
Make a significant non-destructive change btn-primary (royal blue -#007bff) Save, Apply, Rename, Select, Attach
Confirmation for non-destructive change btn-success (green) Anti-CSRF confirmation
Make a destructive change btn-danger (red) Delete, Remove
Confirmation for destructive change btn-warning (yellow) Are you sure?
Display information
Including buttons that navigate to another page to show content.
btn-info (turquoise blue - #17a2b8) History, Source, Preview, Find
Make an insignificant change
Including buttons that show/hide content without a page change.
btn-secondary ("cyber grape") Tabs/No tabs, Sort, Filter, Files, Comments, More

  • 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 widgets which call an action and 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/

Edge cases

  • The Post new comment button leads eventually to a positive action so could possibly be considered btn-primary, but this button itself only causes the comment form to display, so is btn-secondary. The Post button in the comment form is btn-primary because it actually causes the action.
  • Although clicking the Clear all caches button is destructive in the sense that it deletes files in the caches, this button can be btn-primary because clearing the caches is a positive action (to remove unwanted files and use updated content, etc.).

Questions

  • Where is the limit between significant and insignificant changes?
    • I don't know of a criteria yet but I would say that for any case where there is a question, it should be classified as signficant.
  • Is it allowed to use btn-primary for confirming a non-destructive change, or to make a destructive change?
    • I think it's more appropriate to use the success color to confirm a non-destructive change; and I think it would be confusing and inconsistent to use btn-primary to make a destructive change.
      • I understand that another color would be more appropriate; my question was whether it is acceptable, because if it is unacceptable, that is not clear in the table's current state.
  • Why is btn-secondary "cyber grape" when in default Bootstrap4 it is dark grey (#6c757d) ?
    • The Bootstrap docs say "Bootstrap includes several predefined button styles, each serving its own semantic purpose" but doesn't give any guidance on the use. The semantic purpose can be inferred from the button class name and color, except in the case of btn-secondary. A rationale can be seen for btn-danger being red (in our cultural context anyway), but there isn't a particular rationale for btn-secondary being dark grey. IIRC, the button's color change in Tiki was to give it a color like the other buttons have and not a gray shade. Maybe the change was also to give it some relationship to btn-primary and its color, which is blue by default, in the same way there is a color relationship between btn-warning and btn-danger.

History

Advanced
Information Version
Tue 05 of Nov, 2019 12:23 GMT-0000 Gary Cunningham-Lee Added info about prioritizing theme colors in buttons. 27
Wed 30 of Oct, 2019 11:30 GMT-0000 luciash d' being ?‍♂️ 26
Wed 30 of Oct, 2019 11:18 GMT-0000 luciash d' being ?‍♂️ 25
Tue 29 of Oct, 2019 04:47 GMT-0000 Gary Cunningham-Lee Updated Bootstrap doc link to point to latest version. 24
Tue 05 of Feb, 2019 14:08 GMT-0000 Gary Cunningham-Lee Text edited for clarity and to update time references. 23
Tue 05 of Feb, 2019 13:57 GMT-0000 Gary Cunningham-Lee Response to question added. 22
Tue 05 of Feb, 2019 12:58 GMT-0000 luciash d' being ?‍♂️ question about btn-secondary color 21
Sat 15 of Sep, 2018 17:47 GMT-0000 Gary Cunningham-Lee Simplified button labels. 20
Sun 15 of Jul, 2018 04:38 GMT-0000 Gary Cunningham-Lee Better color description for secondary. 19
Sun 15 of Jul, 2018 04:35 GMT-0000 Gary Cunningham-Lee Corrected (updated) secondary color description. 18
Sun 15 of Jul, 2018 04:33 GMT-0000 Gary Cunningham-Lee Corrected (updated) secondary color. 17
Sat 14 of Jul, 2018 16:54 GMT-0000 Gary Cunningham-Lee Moved example buttons to "CSS class, and color in Bootstrap default theme" column 16
Sat 14 of Jul, 2018 14:49 GMT-0000 Bernard Sfez / Tiki Specialist Changing button to html 15
Sat 14 of Jul, 2018 06:43 GMT-0000 Bernard Sfez / Tiki Specialist 14
Sat 14 of Jul, 2018 06:40 GMT-0000 Bernard Sfez / Tiki Specialist Setting buttons 13
Fri 13 of Jul, 2018 13:12 GMT-0000 Philippe Cloutier fix sentence on links 12
Tue 26 of Jun, 2018 14:48 GMT-0000 Philippe Cloutier 11
Sun 24 of Jun, 2018 09:08 GMT-0000 Gary Cunningham-Lee Added another button example. 10
Sun 24 of Jun, 2018 09:05 GMT-0000 Gary Cunningham-Lee Clarified blue button colors. 9
Sun 24 of Jun, 2018 08:56 GMT-0000 Gary Cunningham-Lee Added "Edge cases" section and a few cases. 8
Sun 24 of Jun, 2018 07:36 GMT-0000 Gary Cunningham-Lee Added info and views. 7
Fri 22 of Jun, 2018 14:21 GMT-0000 Gary Cunningham-Lee Turned off toc because the page is so short. 6
Thu 21 of Jun, 2018 17:15 GMT-0000 Philippe Cloutier fix typo. oops 5
Thu 21 of Jun, 2018 17:14 GMT-0000 Philippe Cloutier add Questions section 4
Thu 21 of Jun, 2018 17:10 GMT-0000 Philippe Cloutier color corrections and example clarification 3
Thu 21 of Jun, 2018 14:54 GMT-0000 Gary Cunningham-Lee Text clarification. 2
Thu 21 of Jun, 2018 14:48 GMT-0000 Gary Cunningham-Lee Page created. 1

Layout

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