@daffodil/design 0.42.2 → 0.42.3
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/package.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
# Button
|
|
2
2
|
The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
|
|
3
3
|
|
|
4
|
+
## Overview
|
|
4
5
|
Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
|
|
5
6
|
- `<a>` should be used for interactions that will navigate users to a new page or to a different target on the same page.
|
|
6
7
|
- `<button>` should be used when a clickable action is performed within the same page.
|
|
7
8
|
|
|
8
9
|
## Types
|
|
9
|
-
- `daff-button`
|
|
10
|
-
- `daff-icon-button`
|
|
10
|
+
- `daff-button` - Rectangular contained button with background color
|
|
11
|
+
- `daff-icon-button` - Icon button used with icon fonts
|
|
11
12
|
- `daff-raised-button` - Rectangular contained button with background color and elevation
|
|
12
|
-
- `daff-stroked-button`
|
|
13
|
+
- `daff-stroked-button` - Rectangular outlined button with no background color
|
|
13
14
|
|
|
14
15
|
### Basic Button
|
|
15
16
|
<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
|
|
@@ -17,21 +18,32 @@ Native `<button>` or `<a>` elements are always used in order to provide an easy,
|
|
|
17
18
|
### Stroked Button
|
|
18
19
|
<design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
|
|
19
20
|
|
|
21
|
+
> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
|
|
22
|
+
|
|
20
23
|
### Raised Button
|
|
21
24
|
<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
|
|
22
25
|
|
|
23
26
|
### Icon Button
|
|
24
27
|
<design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
|
|
25
28
|
|
|
29
|
+
> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
|
|
30
|
+
|
|
26
31
|
### Underline Button
|
|
27
32
|
<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
|
|
28
33
|
|
|
34
|
+
## Sizes
|
|
35
|
+
The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
|
|
36
|
+
|
|
37
|
+
Supported Sizes: `sm | md | lg`
|
|
38
|
+
|
|
39
|
+
<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
|
|
40
|
+
|
|
29
41
|
## Theming
|
|
30
42
|
The default color of a button is light gray, but it can be updated to one of the supported colors by using the `color` property.
|
|
31
43
|
|
|
32
44
|
Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
|
|
33
45
|
|
|
34
|
-
> For select button types, `
|
|
46
|
+
> For select button types, `black` and `white` should be used on a darker background in order to have sufficient contrast.
|
|
35
47
|
|
|
36
48
|
## Status Indicators
|
|
37
49
|
Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
|
|
@@ -40,13 +52,6 @@ Supported statuses: `warn | danger | success`
|
|
|
40
52
|
|
|
41
53
|
<design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
|
|
42
54
|
|
|
43
|
-
## Sizes
|
|
44
|
-
The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
|
|
45
|
-
|
|
46
|
-
Supported Sizes: `sm | md | lg`
|
|
47
|
-
|
|
48
|
-
<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
|
|
49
|
-
|
|
50
55
|
## Accessbility
|
|
51
56
|
Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default. The `<button>` element should be used when a clickable action is performed within the same page. The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
|
|
52
57
|
|