Status MonitorWebsite
Integration Guides

Croissant Modal Button

Suggest Edits

This component is a button that opens the Croissant Information Modal. It will present as an un-styled line of text, which can be customized to match your UI.

Required Attributes

text

Type: string

This will set the button's label.

Example

<croissant-modal-button text="Learn More"></croissant-modal-button>

Optional Attributes

payout-method

custom-modal-styles

custom-modal-content


Customization

custom-styles

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

type CustomTextStylesPropTypes = {
  color?: string;
  fontFamily?: string;
  fontSize?: number;
  lineHeight?: number;
  letterSpacing?: number;
  textDecoration?: "underline" | "none";
};

Example

<croissant-modal-button text="Learn More"
	custom-text-styles="{
      color: 'hotpink',
      fontSize: 18,
      lineHeight: 14,
      letterSpacing: 0,
      textDecoration: 'underline',
    }" // See Typescript tab for an example of how to append
 ></croissant-modal-button>

const modalButtonStyles = {
      color: "hotpink",
      fontSize: 18,
      lineHeight: 14,
      letterSpacing: 0,
      textDecoration: "underline",
    };

const modalButton = document.querySelector("croissant-modal-button");

modalButton.setAttribute(
      "custom-text-styles",
      JSON.stringify(modalButtonStyles)
    );

Screennshot

Updated 5 months ago