Top Navigation

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

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

1. Type

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

Image 1.1 : Title

Image 1.2 : Title and Search

Image 1.3 : Modal

Image 1.4 : Profile

Image 1.5 : Search

Image 1.6 : Message

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.

Top navigation
Title
Title
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)
}

Compose

🚧 This page is under construction.

React

🚧 This page is under construction.

Discover more content

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Premium Version