Customizations

`custom-styles`

This attribute can be used to customize the look of the Croissant Toggle You can customize select CSS properties via a JSON object. For an overview of the properties and types available, see below:

 type ToggleStyles = {
  primaryColor?: string; // Default is blue. 
  secondaryColor?: string; // Default is black. Sets the "off" color for the Toggle.
  fontFamily?: string; // Default is var(--croissant-font-family--main)
  fontColor?: string; // Default is black
  defaultFontSize?: number; // Default is 14
  defaultLineHeight?: number; // Default is 14
  smallFontSize?: number; // Default is 13
  smallLineHeight?: number; // Default is 13
};

Example (default styles):

<croissant-toggle custom-styles="
	{
    primaryColor: 'blue',
    secondaryColor: 'black',
    fontFamily: 'var(--croissant-font-family--main)',
    fontColor: 'black',
    defaultFontSize: 14,
    defaultLineHeight: 14,
    smallFontSize: 13,
    smallLineHeight: 13,
  }  
"></croissant-toggle>

custom-styles

Example (default styles):

Examples 👉

`custom-styles`