docs/buttons: edit styleguide #1432
Conversation
|
Report of
|
| - **Secondary button:** The secondary button variant has a grayscale appearance to distinguish it from the primary button. | ||
| - **Danger button:** We use the danger button variant to emphasize particularly dangerous, destructive or critical actions that cannot easily be undone. Consider this especially in confirmation dialogs. | ||
| - **Primary:** Has a solid background in the primary color. We typically use primary buttons for the most important or most-likely next action within the UI. | ||
| - **Secondary:** Has a transparent background in the secondary color. We typically use secondary buttons for standard actions that need to be easily recognizable or for actions supporting the default (primary) action. |
There was a problem hiding this comment.
Description is the same as for the Outline option ("for standard actions actions... supporting the primary action". In Figma the Secondary button is described as "Use for special usecases when other button types catch too much attention". The whole primary/secondary topic is highly confusing, we should spend a paragraph and an illustration on that.
packages/documentation/docs/controls/buttons/_button_styleguide.md
Outdated
Show resolved
Hide resolved
packages/documentation/docs/controls/buttons/_button_styleguide.md
Outdated
Show resolved
Hide resolved
| - **Cluster buttons:** Buttons can be clustered in groups based on their relationship. A cluster can contain a mixture of buttons, e.g. a combination of a primary button with two primary ghost buttons. We recommend a minimum distance of `0.5rem` between adjacent buttons, and we typically cluster buttons if actions/functions are related but not excluding each other. Otherwise, consider using a `button group`. | ||
| - **Button width:** Button width depends on its content. In addition, buttons have a default minimum width of 5rem to lay out common combinations such as "OK" and "Cancel" more harmoniously with equal widths. The minimum width is customizable to accommodate other combinations. | ||
| - **Alignment:** Buttons can be left- or right-justified or fully span a container’s width. | ||
| - **Cluster buttons:** Cluster buttons in groups with related functions. A cluster might include various types of buttons, e.g. a primary and secondary ghost button. We recommend a gap of `0.5rem` between buttons. |
There was a problem hiding this comment.
would give an example that shows the intended use of primary and primary outline ("primary and secondary in UX context").
|
The styleguide for the buttons is improved here