Anatomy
Defining shared language for discussing the construction and structure of this component.
|
Key |
Category |
Parts |
|---|---|---|
|
1 |
Shape |
Border radius, border color |
|
2 |
Shape |
Background color |
|
3 |
Shape |
Padding (block [top, bottom], inline [left, right]) |
|
4 |
Text |
Font family, size/line height, color |
|
5 |
Icon |
Size, color |
Usage
Android specific usage guidance coming soon.
In the meantime please reference Material Design for general guidance when designing for Android.
Variants
Acorn offers 6 button types, with 2 states across 2 modes (themes).
Sizes
States
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.
Primary
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Label only
Label with icon
Label only
Label with icon
Secondary
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Label only
Label with icon
Label only
Label with icon
Tertiary
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Label only
Label with icon
Label only
Label with icon
Destructive
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Label only
Label with icon
Label only
Label with icon
Text button
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Default
Disabled
Default
Disabled
Floating Action Button (FAB)
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Icon only
Icon with label
Icon only
Icon with label
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