get started
CTV & CTS
v.1.0.0 | SaturnCTV and CTS are shortcut props used to modify the visual appearance of the component without requiring the creation or overriding of variants.
Recommended usage:
- When the case is not covered by the default variants and sizes, it's recommended that you create your own variants and sizes.
CTV
CTV is the acronym for Custom Tokens Variants. It allows passing custom tokens to modify the selected variant of the component.
Example
12345678910
<Button
variant="PRIMARY"
size="MEDIUM"
ctv={
{
DEFAULT:{
background_color: 'pink'
},
HOVER:{
background_color: 'red'CTS
CTS is the acronym for Custom Tokens Size. It allows passing custom tokens to modify the size selected in the component.
Example
12345678910
<Button
variant="PRIMARY"
size="MEDIUM"
icon="ICON_GHOST"
cts={
{
icon: {
width: '50px',
height: '50px'
}