Anatomy
|
Key |
Description |
Value? |
Token? |
|---|---|---|---|
|
1 |
Shape: Border Radius |
4px |
token unavailable |
|
2 |
Shape: Background Color |
#312A64 |
Tokens Available (see Figma) |
|
3 |
Shape: Padding (block, inline) |
6px, 16px |
token unavailable |
|
4a |
Text: Font |
Roboto |
token unavailable |
|
4b |
Text: Size/Line Height |
14px/14px |
token unavailable |
|
4c |
Text: Color |
#FBFBFE |
Tokens Available (see Figma) |
|
5a |
Icon: Glyph |
Collection |
token unavailable |
|
5b |
Icon: Size |
24px |
token unavailable |
|
5c |
Icon: Color |
#FBFBFE |
Tokens Available (see Figma) |
Usage
Types
Acorn offers six button types for Android.
See Themes for information on differences across themes.
See States for information on interactive states.
Themes
Acorn offers two button themes for Android.
States
States this component may appear in. Each state is distinct across Types.
Label Only
Label + Icon
Icon Only
This state is only available on the FAB button type.
Default
Disabled
Disabled visual styles should only be applied when the button is disabled.
Focus
Android implementations inherit the built-in focus states from the operating system, and there is no Acorn specific visual override for this.
The CSS pseudo class :focus does not affect visual output in Android.
Sizes
Behavior and interaction
Android specific behavior/interaction guidance coming soon.
In the meantime please reference Material Design for general guidance when designing for Android.
Writing guidelines
Localization