Button
Common buttons prompt most actions in a UI
Use Cases
- Users should be able to:
- Use a button to perform an action
- Navigate to and activate a button with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) button |
| Space / Enter | Activates the (non-disabled) button |
Use Cases
- Users should be able to:
- Use a button to perform an action
- Navigate to and activate a button with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) button |
| Space / Enter | Activates the (non-disabled) button |
Use Cases
- Users should be able to:
- Use a button to perform an action
- Navigate to and activate a button with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) button |
| Space / Enter | Activates the (non-disabled) button |
Use Cases
- Users should be able to:
- Use a button to perform an action
- Navigate to and activate a button with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) button |
| Space / Enter | Activates the (non-disabled) button |