Button

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 : Primary

Image 1.2 : Secondary

Image 1.3 : Tertiary

Image 1.4 : Ghost

2. Size

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

Name

Vertical padding

Horizontal padding

Border radius

extraLarge

16 px

24 px

8 px

Large

12 px

16 px

8 px

Medium

8 px

16 px

8 px

Small

6 px

12 px

8 px

Image 2.1 : extraLarge

Image 2.2 : Large

Image 2.3 : Medium

Image 2.4 : Small

3. State

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

Image 3.1 : Default

Image 3.2 : Hover

Image 3.3 : Pressed

Image 3.4 : Disabled

4. Icon

Use the iconLeft or iconRight prop to control the visual style of the button.

Image 4.1 : iconLeft

Image 4.2 : iconRight

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.

Name

Height

Font size

Line height

extraLarge

56 px

16 px / 24 px

8 px

Large

48 px

16 px / 24 px

8 px

Medium

40 px

16 px / 24 px

8 px

Small

32 px

14 px / 20 px

8 px

1. Type

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

Primary

Secondary

Tertiary

Ghost

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

2. Size

You can use .extraLarge or .large or .medium or .small to change the size of the button component.

Button

HStack(spacing: 16{
     CKButtonView(.extraLarge,.primary,"Button")
     .frame(width: 100)
     CKButtonView(.Large,.primary,"Button")
     .frame(width: 100)
     CKButtonView(.Medium,.primary,"Button")
     .frame(width: 100)
     CKButtonView(.Small,.primary,"Button")
     .frame(width: 100)
}