Button Styles

Provided styles for the Chariot Connect button

Using a default theme

Choose your theme by adding the theme name as a parameter to the chariot-connect modal, as below.

HTML

<chariot-connect 
	id="chariot" 
	cid="GENERATED_CONNECT_IDENTIFIER" 
	theme="THEME_NAME" <!-- Add this parameter ->
>
</chariot-connect>

React

<ChariotConnect 
  cid="GENERATED_CONNECT_IDENTIFIER" 
  theme="THEME_NAME" <!-- Add this parameter -> 
  ...
/>

We provide the options below as default themes. If theme is not defined, DefaultTheme will be used.

DefaultTheme

LightModeTheme

LightBlueTheme

GradientTheme

Creating a custom theme

To create a custom theme for the Chariot Connect button, create an object with the desired properties that you wish to change. Utilize Tailwind CSS styling in the definition of these properties.

🚧

Important Note for Style Customizations

Style customizations for Chariot Connect require that all available CSS be packaged within the chariot-connect.umd.js bundle. The problem is that for Chariot to allow any customizations, we would need to include the entire tailwindcss package (~2.4Mb uncompressed) which would degrade performance and load times to an unacceptable level. While performance is a concern, we also realize the need for a consistent and seamless user experience and are also committed to providing configurations for size, padding, border radius, etc. on top of the pre-built themes that we offer.

JavaScript

// get the element from the DOM
const chariot = document.getElementById("chariot")

// define your alterations using valid properties from the table below
const alterations = {
	width: "w-12",
	height: "h-8",
};

// register your new theme with a custom name
chariot.registerTheme("myTheme", alterations);

React

<ChariotConnect 
  cid="GENERATED_CONNECT_IDENTIFIER" 
  theme={
        width: "w-12",
        height: "h-8",
    }
  ...
/>

Theme Properties

Parameter Name	Use	Allowed value
width	The width of the button	width up to 16 or 64px
height	The height of the button	height at least 9 or 36px up to 12 or 48px
showExtendedText	Show an extended text (Give with Donor Advised Fund) version of the DAFpay button text	true or false (this value is false by default)