Components Reference
The components object in a Code Mode style holds per-component overrides. Most individual CSS variables are easy to understand from their names, so instead of listing every one, this page explains the pattern they all follow and gives a categorized index so you can find the right key quickly.
For globals (colors, typography, spacing, and so on), see the Globals Reference. For specific quirks, like badges, logos, and the required-field indicator, see Advanced Styling Examples.
Note
A component's keys don't appear automatically in Code Mode. You can either add them manually following the pattern below, or make the change in the GUI first, which will generate the corresponding keys in Code Mode.
Structure
Every component follows the same three-layer shape:
- Base properties: flat CSS custom properties that always apply.
- State modifiers: keys starting with
_that apply only when that state is active, like hover, disabled, or focused. - Dimensions: named object keys, like
modeorsize. We call these "dimensions" in this doc because each one is an independent axis of configuration, a component can be a certain mode and a certain size and a certain variant, all at once, each set separately. A dimension's sub-keys are the options you can pick along that axis; only the sub-key matching the component's current setting applies.
Any of these can nest inside each other. An option inside a dimension can contain its own state modifiers, and the other way around too. Here's button with all three layers, trimmed to the essentials:
{
"components": {
"button": {
"--descope-button-border-radius": "var(--descope-radius-sm)",
"--descope-button-cursor": "pointer",
"_disabled": {
"--descope-button-main": "var(--descope-colors-surface-light)"
},
"mode": {
"primary": {
"--descope-button-main": "var(--descope-colors-primary-main)",
"_disabled": {
"--descope-button-main": "var(--descope-colors-surface-dark)"
}
}
}
}
}
}Here, the base properties always apply. _disabled only applies when the button is disabled. mode is the dimension here, and primary is one of the options it holds, so mode.primary only applies when the button's mode is set to primary. Nested inside it, _disabled sets the disabled color just for that combination.
mode isn't special, it's just one dimension. button also has a size dimension, whose options are sm, md, lg, and so on, and a variant dimension, whose options are contained, outline, and link. So button.size.lg overrides the large-size button, and button.variant.outline overrides the outline-style button, the same way button.mode.primary overrides the primary-color button:
{
"components": {
"button": {
"size": {
"lg": { "--descope-button-font-size": "18px" }
},
"variant": {
"outline": { "--descope-button-border-color": "var(--descope-button-main)" }
}
}
}
}State Modifiers
These _-prefixed keys recur across many components. Not every component supports every modifier.
| Modifier | Applies when |
|---|---|
_fullWidth | The component is set to stretch to its container's width |
_bordered | A border is enabled on the component |
_disabled | The component is disabled |
_focused | The component has keyboard/input focus |
_hover | The pointer is hovering the component |
_active | The component is in an active/pressed state |
_checked | A checkbox, radio, or toggle is checked/on |
_selected | An item is the selected one in a list or group |
_invalid | The component's value has failed validation |
_readonly / _readOnly | The component is read-only. Casing varies by component, so match what that component's block uses |
_loading | The component is in a loading state |
_empty | The component has no content or items |
_hidden | The component is hidden |
_required | The component is marked required, exposing its required-indicator variable |
_square | The component renders as a fixed square (icon-only buttons) |
_editable | The component allows inline editing (for example, an editable avatar) |
_obfuscated | Input content is masked, as with password fields |
_collapsible | A container can be expanded/collapsed |
_fillTitle | A collapsible container's title area grows to fill available space |
_border | Used only by collapsibleContainer for its border. Note this is singular, not _bordered |
_shrinkToIndicator | A badge collapses to a small dot indicator instead of showing text |
_hideCursor | Hides the text caret, used in the passcode component |
_italic / _lowercase / _uppercase | Text style transforms on the text component |
_horizontal | Lays a component out horizontally instead of the default direction (used by timerButton, countrySubdivisionCityField) |
_vertical | Lays a component out vertically instead of the default direction (used by divider) |
_timerInside | Renders a timer inline inside its parent button rather than beside it |
_iconFillCurrentColor | An icon inherits currentColor instead of its own fill |
_hasValue | A floating-label input currently has a value (used to keep the label raised) |
_hideWhenEmpty | Hides the component completely when it has no content. Nests inside _empty rather than standing on its own (used by enrichedText) |
Dimensions
These named object keys group related overrides under enumerated sub-keys, as described in Structure above.
| Dimension | Typical options | Used by |
|---|---|---|
mode | Color intent. Varies per component, commonly primary, secondary, error, success, warning, default | alert, badge, button, link, loaderLinear, loaderRadial, notificationCard, text |
size | xs, sm, md, lg, xl, 2xl (a component uses whichever subset applies) | avatar, badge, button, calendar, inputWrapper, notificationCard, passcode, radioButton, timer, uploadFile, and others |
variant | A component's alternate visual forms, e.g. button: contained/outline/link; list: tiles; listItem: tile; text: h1-body2 | badge, button, list, listItem, text |
shadow | sm, md, lg, xl, 2xl | badge, collapsibleContainer, container, tooltip |
textAlign | left, center, right | alert, button, link, radioGroup, recoveryCodes, text, textArea, textField, timer |
borderRadius | sm, md, lg, xl, 2xl, 3xl | collapsibleContainer (also used by container, but see the note below) |
spacing / spaceBetween | xs-xl sizing steps for gaps and internal padding | alert, collapsibleContainer, container |
gap | xs-xl sizing steps for the space between list items | list |
horizontalPadding / verticalPadding | sm, md, lg | collapsibleContainer, container |
itemPadding | xs-xl | appsList |
iconPosition | left, right | collapsibleContainer |
position | Anchor points like top-start, top-center, top-end, bottom-start, bottom-center, bottom-end | attachment |
direction | column, row (each with nested horizontalAlignment/verticalAlignment) | container |
horizontalAlignment / verticalAlignment | start, center, end | container |
labelType | floating, static | inputWrapper, multiSelectComboBox |
data-descope-provider | Social login provider keys, e.g. apple | button (for provider-specific hover/focus styling) |
score | 0-4 password strength levels | passwordStrength |
timerPosition | end (default is the unset/start position) | timerButton |
enabled | true/false | hcaptcha |
id | Specific instance targeting, e.g. "ROOT" for a screen's root container | container |
Available Components
| Key | Styles |
|---|---|
inputWrapper | Shared base tokens most text-style inputs inherit from |
textField | Single-line text input |
textArea | Multi-line text input |
emailField | Email input |
password | Password input (login) |
newPassword | Password input with policy preview (signup/reset) |
numberField | Numeric input |
phoneField | Phone number input with country code dropdown |
phoneInputBoxField | Phone number input, boxed variant |
dateField | Date picker input |
monthDayField / monthDayFieldPicker | Month/day picker input and its calendar overlay |
addressField | Address input |
countrySubdivisionCityField | Country/state/city grouped input |
autocompleteField | Text input with autocomplete suggestions |
comboBox / multiSelectComboBox | Dropdown select (single and multi) |
hybridField | Field that can switch input types |
mappingsField / multiLineMappings / samlGroupMappings | Key-value mapping inputs (attribute/group mappings) |
Examples
These are complete, real component blocks. They aren't trimmed, so you can see how base properties, state modifiers, and dimensions actually combine in practice.