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
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 : 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.
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.
1. Type
You can use .primary or .secondary or .tertiary or .ghost to change the type of the button component.
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.
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. State
You can use .default or .pressed or .disabled to change the state of the button component.
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)
}
4. Icon
You can use .iconLeft or .iconRight to change the icon of the button component.
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)
}
Compose
🚧 This page is under construction.
React
🚧 This page is under construction.
Discover more content
You have questions or need help?
You want to try?
Save time and money?