Input field

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

Image 1.2 : Success

Image 1.3 : Error

Image 1.4 : Disabled

Image 1.5 : Search

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

3. State

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

Image 3.1 : Default

Image 3.2 : Active

Image 3.3 : Filled

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.

1. Type

You can use .default or .success or .disabled or .error to .searchchange the type of the button component.

Input Field

Search Field

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 or .large or .medium or .small to change the size of the button component.

Input Field

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