Go Main page
Go Main page

Web components

cover

get started

CTV & CTS

v.1.0.0 | Saturn

CTV 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'
        }