Advanced Styling Examples

Most of the fields inside code mode are self explained by name, and can be tested right away in the flow builder. Some best practices and odd features are documented here:

Components

Badge: Is the styling of the component of the options you get inside a multi-select field:

Logo: Contains the values of the URL's for the company logo that will be used, including the fallback URL:

	"logo": {
      "--descope-logo-fallback-url": "url(https://imgs.descope.com/components/no-logo-placeholder.svg)",
      "--descope-logo-url": "https://static.descope.com/pages/__ProjectID__/v2-alpha/light/logo.png"
    }

TOTP Image: Holds the placeholder image for TOTP button

    "totpImage": {
      "--descope-totp-image-fallback-url": "url(https://imgs.descope.com/components/totp-placeholder.svg)"
    }

Required Attribute: If a component supports using the required boolean, the _required attribute will appear in code mode, stating which component will it use to indicate it:

	"_required": {
        "--descope-upload-file-required-indicator": "var(--descope-input-wrapper-required-indicator)"
	}

Notification Card: can alter the style of the notification toast you and other Descopers will get, also how different types of modes will be displayed, such as errors and success messages for actions performed in Descope:

	"mode": {
        "error": {
          "--descope-notification-card-background-color": "var(--descope-colors-error-main)",
          "--descope-notification-card-border-color": "var(--descope-colors-error-light)",
          "--descope-notification-card-text-color": "var(--descope-colors-error-contrast)"
        },
        "primary": {
          "--descope-notification-card-background-color": "var(--descope-colors-primary-main)",
          "--descope-notification-card-border-color": "var(--descope-colors-primary-light)",
          "--descope-notification-card-text-color": "var(--descope-colors-primary-contrast)"
        },
        "success": {
          "--descope-notification-card-background-color": "var(--descope-colors-success-main)",
          "--descope-notification-card-border-color": "var(--descope-colors-success-light)",
          "--descope-notification-card-text-color": "var(--descope-colors-success-contrast)"
        }
	},

Alert Error Icon: can add an icon to the Alert component's error mode for example an exclamation point icon to display errors for better accessibility purpose in Descope:

	{
  "components": {
    "alert": {
      "mode": {
        "error": {
          "--descope-alert-icon": "url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZTIxZDEyIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAzMC4zMzQgMzAuMzM0Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0xNS4xNjcsMEM2LjgwNSwwLDAuMDAxLDYuODA0LDAuMDAxLDE1LjE2N2MwLDguMzYyLDYuODA0LDE1LjE2NywxNS4xNjYsMTUuMTY3YzguMzYxLDAsMTUuMTY2LTYuODA1LDE1LjE2Ni0xNS4xNjcNCgkJQzMwLjMzMyw2LjgwNCwyMy41MjgsMCwxNS4xNjcsMHogTTE3LjE2NywyNS42NjdoLTR2LTQuNWg0VjI1LjY2N3ogTTE3LjE2NywxOS41NDJoLTRWNS4xNjdoNFYxOS41NDJ6Ii8+DQo8L2c+DQo8L3N2Zz4=)"
        }
      }
    }
  }
}

Mandatory Behavior for Inputs: Descope has a mandatory behavior setting for inputs. When enabled, it adds an asterisk (*) to the placeholder text. You can customize the appearance of the asterisk by editing the required indicator:

{
  "components": {
    "emailField": {
      "--descope-email-field-label-required-indicator": "none"
    }
  }
}

Special Attributes: Some components hold styling states for states of the components. Altering the attributes listed below will change how the component will look in different states:

{
	"_checked": {
	...
	},
	"_disabled": {
	...
	},
	"_invalid": {
	...
	},
	"_readonly":{
	...
	},
	"_focused":{
	...
	},
	"_vertical":{
	...
	},
	"_fullWidth":{
 
	},
	"_loading":{
	...
	},
	"_square":{
	...
	},
	"_bordered":{
	...
	},
	"_hidden":{
	...
	},
	"_hideCursor":{
	...
	}
	// special for text component:
	"_italic":{
	...
	},
	"_lowercase":{
	...
	},
	"uppercase":{
	...
	}
}

Was this helpful?

Advanced Styling Examples

Components

On this page