@bonniernews/dn-design-system-web 15.2.0 → 15.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/components/button/README-UXD.md +35 -20
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
## [15.2.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.2.0...@bonniernews/dn-design-system-web@15.2.1) (2024-05-03)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Maintenance
|
|
11
|
+
|
|
12
|
+
* **web:** update readme uxd for button ([#1277](https://github.com/BonnierNews/dn-design-system/issues/1277)) ([a049bee](https://github.com/BonnierNews/dn-design-system/commit/a049bee8711473c4d601ad9eba92538e64296e4b))
|
|
13
|
+
|
|
7
14
|
## [15.2.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@15.1.0...@bonniernews/dn-design-system-web@15.2.0) (2024-05-02)
|
|
8
15
|
|
|
9
16
|
|
|
@@ -1,40 +1,55 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Button - Design guidelines
|
|
2
2
|
|
|
3
3
|
Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.
|
|
4
4
|
|
|
5
|
+
## Anatomy
|
|
6
|
+
<img src="/images/uxd/button-2.png">
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
- **Label:** The text displayed on the button, indicating its function.
|
|
9
|
+
- **Icon:** Iconography that enhances the function.
|
|
10
|
+
- **Background:** The background color or style that defines the button's appearance.
|
|
11
|
+
- **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
12
|
+
- **Shape:** The standard shape is rectangular but the component also supports a rounded format.
|
|
7
13
|
|
|
8
|
-
|
|
9
|
-
2. **Icon** Iconography that enhances the function.
|
|
10
|
-
3. **Background:** The background color or style that defines the button's appearance.
|
|
11
|
-
4. **Border:** The outline surrounding the button, providing visual separation from surrounding elements.
|
|
12
|
-
5. **Shape** The standard shape is rectangular but the component also supports a rounded format.
|
|
14
|
+
## Standard Use and Hierarchy
|
|
13
15
|
|
|
16
|
+
There are four different standard buttons with different purposes and hierarchies to help the user distinguish the level of importance of the task they represent.
|
|
14
17
|
|
|
15
|
-
|
|
18
|
+
<img src="/images/uxd/button-1.png">
|
|
16
19
|
|
|
17
|
-
| Variant | How to use |
|
|
18
|
-
| --------- | ---------------------------------------------------------------------------------------------------- |
|
|
19
|
-
| [Brand](#brand) | Extra high emphasis button used for actions that are extra important for the user flow and conversion. I.e. ”Logga in” |
|
|
20
|
-
| [Primary](#primary) | High emphasis button used to attract attention to the most important task of the layout, typically the next step in the user flow. I.e. ”Nästa fråga” in a quiz. |
|
|
21
|
-
| [Secondary](#secondary)| Medium emphasis button used for alternative non-primary actions. I.e. ”Alla nyheter” in a list of news. |
|
|
22
|
-
| [Outline](#primary%20outline) | Low emphasis Button used for less important actions. Usually used in combination with a primary or brand Button. |
|
|
23
20
|
|
|
21
|
+
| Button | Variant (style) | How to use |
|
|
22
|
+
| ------- | --------------- | ------------------------------------------------------------------------------------------------- |
|
|
23
|
+
| Brand | Brand (default) | Extra high emphasis button used for critical user flows and conversion, i.e. "Create account". |
|
|
24
|
+
| Primary | Primary (default) | Standard call to action button used for the next step in user flows, i.e. "Next question" in a quiz. |
|
|
25
|
+
| Secondary | Secondary (default) | Used for non-primary actions, i.e. "All news" to expand a list. |
|
|
26
|
+
| Ghost | Primary (outline) | Used as the secondary option in a pair with brand or primary. |
|
|
24
27
|
|
|
25
|
-
##
|
|
28
|
+
## Variants
|
|
26
29
|
|
|
27
|
-
|
|
30
|
+
| Variant | How to use |
|
|
31
|
+
| ------------ | ---------------------------------------------------------------------------------------------- |
|
|
32
|
+
| Brand | Extra high emphasis button used for critical user flows. |
|
|
33
|
+
| Primary | High emphasis button used for important user actions. |
|
|
34
|
+
| Secondary | Medium emphasis button used for non-primary actions. |
|
|
35
|
+
| Static white | Used if the button should have a white background regardless of light/dark theme. |
|
|
28
36
|
|
|
37
|
+
## Emphasis Styles
|
|
29
38
|
|
|
30
|
-
|
|
39
|
+
| Style | Description |
|
|
40
|
+
| ----------- | --------------------------------------------------------------------------------------------- |
|
|
41
|
+
| Elevated | Raised appearance, indicating prominence. |
|
|
42
|
+
| Default | Standard appearance, blending with the content. |
|
|
43
|
+
| Outline | Minimalistic outline appearance, providing contrast. |
|
|
44
|
+
| Transparent | No visible background, seamlessly integrating. |
|
|
45
|
+
|
|
46
|
+
## Dos
|
|
31
47
|
|
|
32
48
|
- **Use Primary Buttons for Key Actions:** Employ primary buttons for primary actions within a given context, guiding user focus towards important interactions.
|
|
33
49
|
- **Provide Clear Labeling:** Ensure button labels are concise, descriptive, and indicative of the action they perform, enhancing usability.
|
|
34
50
|
- **Maintain Visual Hierarchy:** Utilize secondary and outline buttons to distinguish lesser actions or provide alternative choices, maintaining a clear visual hierarchy.
|
|
35
51
|
|
|
36
|
-
|
|
52
|
+
## Don'ts
|
|
37
53
|
|
|
38
|
-
- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels
|
|
54
|
+
- **Avoid Ambiguous Labels:** Refrain from using vague or ambiguous labels that might confuse users about the button's function.
|
|
39
55
|
- **Overuse of Primary Buttons:** Reserve primary buttons for the most crucial actions to avoid overwhelming users with excessive visual weight.
|
|
40
|
-
|
package/package.json
CHANGED