Coach Mark

Use the 📏 Size prop to control the visual style of the button.
‍
The typographic system is based on a 9 step scale, every step has a corresponding font-size, line-height and letter-spacing value which are all designed to be used in combination.
Guidance for using and tuning typography

Figma

1. Direction

Use the 🎲 Type prop to control the visual style of the button.

Image 1.1 : Bottom

Image 1.2 : Left

Image 1.3 : Top

Image 1.4 : Right

2. States

Use the 📏 Size prop to control the visual style of the button.

Image 2.1 : With close icon

Image 2.2 : Without close icon

3. State

Use the 🎚️ State prop to control the visual style of the button.

Image 3.1 : With interaction

Image 3.2 : Without interaction

Swift

Use the CKButtonView prop to control the visual style of the button.
‍
The typographic system is based on a 9 step scale, every step has a corresponding font-size, line-height and letter-spacing value which are all designed to be used in combination.

1. Type

You can use .primary or .secondary or .tertiary or .ghost to change the type of the button component.

Headline

Pack my box with five dozen liquor jugs. How vexingly quick draft.

Back

Next step

Headline

Pack my box with five dozen liquor jugs. How vexingly quick draft.

Back

Next step

Headline

Pack my box with five dozen liquor jugs. How vexingly quick draft.

Back

Next step

Headline

Pack my box with five dozen liquor jugs. How vexingly quick draft.

Back

Next step

HStack(spacing: 16{
     CKButtonView(.extraLarge,.primary,"Primary")
     .frame(width: 100)
     CKButtonView(.extraLarge,.secondary,"Secondary")
     .frame(width: 100)
     CKButtonView(.extraLarge,.tertiary,"Tertiary")
     .frame(width: 100)
     CKButtonView(.extraLarge,.ghost,"Ghost")
     .frame(width: 50)
}