Skip to content

Types

Colors

Here is the list of all the colors that can be used with all the color related props like font and border color props:

"blue" | "red" | "green" | "yellow" | "gray" | "black" | "white" | "purple" | "pink" | "indigo" | "teal" | "cyan" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange" | "amber" | "lime" | "emerald" | "rose" | "fuchsia" | "violet" | "lightBlue" | "sky" | "cyan" | "coolGray" | "trueGray" | "warmGray" | "blueGray" | "orange";

Sizes

Here is the list of all the sizes that can be used with the size, which is the same for all the components:

"small" | "medium" | "large";

Button Variants

Here is the list of all the variants that can be used with the variant prop:

"outlined" | "contained" | "text";

Rounded

Here is the list of all the values that can be used with the rounded prop:

true | false;

Src

Here is the type for the src prop that can be used with the Avatar component:

string;

Bold

Here is the type for the bold prop that can be used with the Avatar component:

true | false;

Font Weight

Here is the type for the fontWeight prop that can be used with the Avatar component:

"thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

Limit text

Here is the type for the limit prop that can be used with the Card component:

number;

Checked

Here is the type for the checked prop that can be used with the Switch component:

true | false;

Disabled

Here is the type for the disabled prop that can be used with the Switch component:

true | false;