Tab Control

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

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

Image 1.1 : Left

Image 1.2 : Right

2. Size

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

Image 2.1 : Minimum

Image 2.2 : Maximum

3. Icon

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

Image 3.1 : Default

Image 3.2 : Icon and Badge

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

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

Value

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

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

Value

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

3. Icon

You can use .default or .pressed or .disabled to change the state of the button component.

Value

Compose

🚧 This page is under construction.

React

🚧 This page is under construction.

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Premium Version