Button

null

Anatomy

Defining shared language for discussing the construction and structure of this component.

null

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

null

Label with icon

null

Label only

null

Label with icon

null

Secondary

Figma Component (internal only)

Examples

Additional states are represented in our Figma library.

Label only

null

Label with icon

null

Label only

null

Label with icon

null

Tertiary

Figma Component (internal only)

Examples

Additional states are represented in our Figma library.

Label only

null

Label with icon

null

Label only

null

Label with icon

null

Destructive

Figma Component (internal only)

Examples

Additional states are represented in our Figma library.

Label only

null

Label with icon

null

Label only

null

Label with icon

null

Text button

Figma Component (internal only)

Examples

Additional states are represented in our Figma library.

Default

null

Disabled

null

Default

null

Disabled

null

Floating Action Button (FAB)

Figma Component (internal only)

Examples

Additional states are represented in our Figma library.

Icon only

null

Icon with label

null

Icon only

null

Icon with label

null

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