Advanced Styling Examples
The names of most fields inside Code Mode are self-explanatory, and those fields can be tested right away in the flow builder. Some best practices and odd features are documented here. For the full set of available globals and components keys, see the Globals Reference and Components Reference.
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
_requiredattribute 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?