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 |
Usage
Reference HIG for general guidance when designing for iOS.
Variants
Acorn offers 3 button types, with 2 states across 2 modes (themes).
Sizes
States
iOS 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 iOS.
Primary
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Secondary
Figma Component (internal only)
Examples
Additional states are represented in our Figma library.
Close
Figma Component (internal only)
The "close" type only has the default state in light and dark modes. And has changes to the general anatomy as follows:
Examples
Additional states are represented in our Figma library.
Behavior and interaction
iOS specific behavior/interaction guidance coming soon.
In the meantime please reference HIG for general guidance when designing for iOS.
Writing guidelines
Follow Apple Human Interface Guidelines, which uses headline-style capitalization. Capitalize every word except articles, coordinating conjunctions, and prepositions of four or fewer letters.
See capitalization for more guidance.