Line item

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. Type

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

Image 1.1 : Chevron

Image 1.2 : Toggle

Image 1.3 : Button

Image 1.4 : Table

Image 1.5 : Text

2. Size

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

Image 2.1 : Large

Image 2.2 : Medium

Image 2.3 : Small

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

Description

Headline

Description

Button

Headline

Description

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)
}