You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/components/button/guide.md
+28-33Lines changed: 28 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,59 +5,54 @@ doc-type: 'tab-item'
5
5
6
6
Buttons initiate actions, apply actions to selected objects and activate/deactivate functions. We typically use buttons to trigger an immediate action, and you can place them within dialogs, forms, modal windows and other containers.
-**Primary button:** In our applications, we most often use the primary button variant.
16
-
-**Secondary button:** The secondary button variant has a grayscale appearance to distinguish it from the primary button.
17
-
-**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.
**Note:** Please be aware that the terms _primary_ and _secondary_ are not used in accordance to common UX terminology for primary, secondary and ghost button.
17
+
-**Subtle:** Use as an alternative to the default button when a less prominent visual emphasis is desired. Previously labeled as "secondary" in earlier versions of the design system, the term "subtle" more accurately reflects its intended purpose and visual hierarchy.
18
+
-**Danger:** Use for destructive or critical actions like "delete" or "remove". We typically use the danger button for actions that are irreversible or have a significant impact on the user’s data or the application state.
20
19
21
20
## Options
22
21
23
-
-**Default:** Use for the most important or most-likely next action within the user interface. These are typically actions that advance the user through a process, such as "Submit", "Save" or "Add". We use these sparingly and recommend only one per layout. These are typically called _primary_ buttons in UX.
24
-
-**Outline:** Use for standard actions that need to be easily recognizable or for actions supporting the default (primary) action. These could include actions like "Cancel", "Reset" or "Advanced Options". These are typically called _secondary_ buttons in UX.
25
-
-**Ghost:** Use for actions that are typically not part of the core user journey but serve specialized or conditional purposes. Tertiary buttons can represent actions such as "Advanced settings", "More options", "Help" or "Customize". They may also be used for conditional actions like "Change preferences" or "View details".
26
-
-**Icon:** Icons can also be displayed with button labels.
27
-
-**Disabled:** Buttons can be disabled (see also button states).
28
-
-**Loading:** A loading spinner is displayed on the button. The spinner replaces an icon when available.
29
-
-**Type:** A submit button is available. Submit buttons are typically used in forms and trigger a submit event. Apply this type to make a submit button more accessible.
22
+
-**Default:** Use default buttons with filled style for primary actions.
23
+
-**Outline:** Use outline buttons for secondary actions supporting the primary action, e.g. "Cancel" or "Reset".
24
+
-**Ghost:** Use ghost buttons for tertiary actions that serve specialized or conditional purposes, e.g. "Advanced settings", "More options", "Help" or "Customize", "Change preferences" or "View details".
25
+
-**Label:** The label is the text displayed on the button. We typically use short, descriptive labels that clearly communicate the action the button triggers.
26
+
-**Icon:** An icon can be displayed on the button. We typically use icons to support the label and make the button more easy to discover by the user. The icon should be widely known for representing the action or function among your users. See [icon button](../icon-button/index.mdx) for buttons without label and icon only.
27
+
-**Type:** Use the type "submit" when sending user input from a form to a server. For all other actions such as triggering dialogs or performing navigation use the default type "button".
30
28
31
29
## Behavior in context
32
30
33
31
-**Interaction:** Buttons can be triggered by pressing anywhere within the button container. When buttons are focused, they can be triggered by pressing `Space`.
34
-
-**Text truncation:** Button labels are not truncated. All text on buttons is one line only.
35
-
-**Ellipsis (…):** Ellipsis can be used to indicate that an action requires further input or choice from the user, such as "Save as…" which opens a further list of file types to choose from. Ellipses is typically not used for actions with a subsequent confirmation dialog.
36
-
-**Alignment:** Buttons can be left-justified or right-justified or fully span a container’s width.
37
-
-**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`.
38
-
-**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.
32
+
-**Text truncation:** Button labels are not truncated. All text on buttons is one line only.
33
+
-**Alignment:** Buttons can be left- or right-aligned or fully span a container’s width.
34
+
-**Button width:** Buttons dynamically adjust their width based on content but have a default minimum width of `5rem` to ensure harmonious alignment for common pairs like "OK" and "Cancel". The minimum width can be customized for different needs.
35
+
-**Cluster buttons:** Cluster buttons in groups with related functions. A cluster might include various types of buttons, e.g. default, outline and ghost to show primary, secondary and tertiary actions. We recommend a gap of `0.5rem` between buttons.
Buttons have six states: Default, hover, active, disabled, loading and focused. In a disabled state, buttons are visually displayed but don’t offer any user interaction.
41
+
Buttons have six states: Default, hover, active, disabled, loading and focused. In a disabled and loading state, buttons are visually displayed but don’t offer any user interaction.
- Do use short button labels to allow users to quickly scan, understand and remember them (follow our writing style guide for more support)
49
-
- Do use only one primary (default) button in one visual unit for a clear and singular focus on the main call to action
50
-
- Do use the danger button for destructive or critical actions like "delete" or "remove", especially in confirmation dialogs
51
-
- Do use a default margin between adjacent buttons of at least `0.5rem`
52
-
- Do adjust default and outline button width to label length or container width
47
+
- Do use short button labels to allow users to quickly scan, understand and remember them (see our [writing style guide](../../guidelines/language/dialogs-and-buttons.md))
48
+
- Do use ellipsis (…) to indicate that an action requires further input or choice from the user, e.g. "Save as…" which opens a list of file types to choose from.
49
+
- Do use the default option for buttons to indicate one primary action in a visual unit, all other secondary actions should use the outline option.
53
50
- Don’t use the danger button excessively or repetitively in lists or tables
54
-
- Don’t extend your ghost button width beyond the label’s available width
55
-
- Don’t rely on standard buttons when many actions/functions are necessary (use dropdown, split or menu buttons or move some functionality to a panel or a dialog)
56
-
- Don’t use buttons for navigation
51
+
- Don’t rely on standard buttons when many actions are necessary (use [dropdown buttons](../dropdown-button/index.mdx) or [split buttons](../split-button/index.mdx) instead, or move some functionality to a [pane](../panes/index.mdx) or a [dialog](../modal/index.mdx))
Copy file name to clipboardExpand all lines: docs/components/dropdown-button/guide.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,31 +5,31 @@ doc-type: 'tab-item'
5
5
6
6
Dropdown buttons are button elements that allow users to select an action from a list of options by clicking on a button and revealing a dropdown. Clicking on one of the exposed options triggers the action. We typically use dropdown buttons when no default action is available. Dropdown buttons typically group similar or related actions.
All the variants, options and states of the ix button component apply to the dropdown button. We've listed additional or deviating specifications here.
15
+
All the variants, options and states of the [button](../button/index.mdx) component apply to the dropdown button. We've listed additional or deviating specifications here.
16
16
17
17
## Options
18
18
19
19
-**Label:** Set a label for the dropdown button. We typically use short labels including verbs.
20
20
-**Placement:** Define where the dropdown appears when the button is active. Choose between different directions (top, bottom, left, right) and two options for alignment with the button (start, end). When there isn't enough space for the chosen placement, it's automatically corrected.
- For options of the dropdown triggered when pressing the button, please refer to our separate dropdown component guide.
28
-
- The options **loading** and **type** are not available for split buttons.
27
+
- For options of the dropdown triggered when pressing the button, please refer to our separate [dropdown](../dropdown/index.mdx) component guide.
28
+
- The options **loading** and **type** are not available for dropdown buttons.
29
29
30
30
## States
31
31
32
-
Dropdown buttons have five states: Default, hover, active, disabled and focused. In an active state, dropdown buttons show a dropdown with the available options. The visual appearance of the states is the same as the ix button component.
32
+
Dropdown buttons have five states: Default, hover, active, disabled and focused. In an active state, dropdown buttons show a dropdown with the available options. The visual appearance of the states is the same as the [button](../button/index.mdx) component.
Copy file name to clipboardExpand all lines: docs/components/icon-button/guide.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ doc-type: 'tab-item'
5
5
6
6
Icon buttons are button elements containing only an icon and no text. Due to their small size, icon buttons are often used in complex layouts. We only use icon buttons if a well-known icon is available or the meaning of the icon metaphor is clear from the context.
Copy file name to clipboardExpand all lines: docs/components/split-button/guide.md
+3-9Lines changed: 3 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,28 +5,22 @@ doc-type: 'tab-item'
5
5
6
6
Split buttons consist of two parts: a button labeled with text and/or an icon on the left and a dropdown button labeled with an icon on the right. We typically use split buttons when a default action is available but more options need to be offered. Split buttons group similar or related actions.
All the variants, options and states of the ix button and the ix dropdown button components apply to the split button. We've listed additional or deviating specifications here.
16
+
All the variants, options and states of the [button](../button/index.mdx) and the [dropdown button](../dropdown-button/index.mdx) components apply to the split button. We've listed additional or deviating specifications here.
17
17
18
18
## Options
19
19
20
20
-**Disabled:** The disabled option can be applied to the complete component. There is no option to disable each part of the split button independently.
21
21
-**Label:** Set a label for the button component (left side). We typically use short labels that contain a verb.
22
22
-**Placement:** Define where the flyout appears which is triggered when the dropdown button is active. You can choose between different directions (top, bottom, left, right) and two options for alignment with the button (start, end). When there is not enough space for the chosen setting, the placement is corrected automatically.
-**SplitIcon:** We typically use a chevron icon on the dropdown button, but a custom icon can be set. A common alternative to the chevron is the "more-menu" icon.
23
+
-**Split icon:** We typically use a chevron icon on the dropdown button, but a custom icon can be set. A common alternative to the chevron is the "more-menu" icon.
30
24
- The options **loading** and **type** are not available for split buttons.
0 commit comments