Every BEEQ component exposes a set of CSS custom properties (also called CSS variables) that let you customize its appearance from the outside — without needing to pierce Shadow DOM boundaries or override internal selectors.
Naming convention
All component-level CSS custom properties follow the pattern:
--bq-{component}--{property}
--bq-button--border-radius — border radius of the button--bq-button--border-color — border color of the button--bq-input--border-radius — border radius of the input--bq-input--background-color — background color of the input--bq-icon--size — size of the icon SVG--bq-icon--color — stroke color of the icon SVG
How to override
Set the custom property on the component element itself, or on any ancestor in the DOM tree:
/* Override for all bq-button elements */
bq-button {
--bq-button--border-radius: 9999px; /* pill shape */
--bq-button--border-color: hotpink;
--bq-button--border-width: 2px;
}
/* Override for a specific instance using a class */
bq-button.my-custom-button {
--bq-button--border-radius: 0; /* sharp corners */
}
<bq-button style="--bq-button--border-radius: 0;">Sharp button</bq-button>
Global component variables
A small number of properties are set on :root rather than inside a component shadow root. These are used for cross-component concerns:
:root {
/* Controls the flip direction of icons in RTL layouts.
1 = default (LTR), -1 = flipped (RTL) */
--bq-icon--direction: 1;
/* Side menu dimensions */
--bq-side-menu--width: 256px;
--bq-side-menu--width-collapse: 72px;
}
--bq-icon--direction: -1 on [dir='rtl'].
Button variables
The bq-button component exposes the following CSS custom properties:
| Property | Default | Description |
|---|
--bq-button--border-color | transparent | Border color |
--bq-button--border-radius | var(--bq-radius--m) | Border radius |
--bq-button--border-style | solid | Border style |
--bq-button--border-width | 0 | Border width |
--bq-button--small-paddingX | var(--bq-spacing-xs) | Small size horizontal padding |
--bq-button--small-paddingY | var(--bq-spacing-xs2) | Small size vertical padding |
--bq-button--small-font-size | var(--bq-font-size--m) | Small size font size |
--bq-button--medium-paddingX | var(--bq-spacing-m) | Medium size horizontal padding |
--bq-button--medium-paddingY | var(--bq-spacing-s) | Medium size vertical padding |
--bq-button--medium-font-size | var(--bq-font-size--m) | Medium size font size |
--bq-button--large-paddingX | var(--bq-spacing-l) | Large size horizontal padding |
--bq-button--large-paddingY | var(--bq-spacing-m) | Large size vertical padding |
--bq-button--large-font-size | var(--bq-font-size--m) | Large size font size |
Input variables
The bq-input component exposes:
| Property | Default | Description |
|---|
--bq-input--background-color | ui.primary | Input background |
--bq-input--border-color | stroke.tertiary | Border color |
--bq-input--border-color-focus | stroke.brand | Border color when focused |
--bq-input--border-radius | var(--bq-radius--s) | Border radius |
--bq-input--border-width | var(--bq-stroke-s) | Border width |
--bq-input--border-style | solid | Border style |
--bq-input--gap | var(--bq-spacing-xs) | Gap between content and prefix/suffix |
--bq-input--label-text-color | text.primary | Label text color |
--bq-input--label-text-size | var(--bq-font-size--s) | Label font size |
--bq-input--text-color | text.primary | Input text color |
--bq-input--text-size | var(--bq-font-size--m) | Input font size |
--bq-input--text-placeholder-color | text.secondary | Placeholder text color |
Icon variables
The bq-icon component exposes:
| Property | Default | Description |
|---|
--bq-icon--color | currentColor | SVG stroke color |
--bq-icon--size | 24px | SVG width and height |
Practical examples
Custom branded button
bq-button[appearance="primary"] {
--bq-button--border-radius: 4px;
--bq-button--border-color: #0057b8;
--bq-button--border-width: 2px;
}
Larger input with custom radius
.my-form bq-input {
--bq-input--border-radius: 0; /* sharp corners */
--bq-input--border-color: var(--bq-brand); /* brand border */
--bq-input--text-size: var(--bq-font-size--l); /* larger text */
}
Colored icon
bq-icon.warning-icon {
--bq-icon--color: var(--bq-warning);
--bq-icon--size: 32px;
}
<bq-icon class="warning-icon" name="warning"></bq-icon>
CSS custom property overrides cascade like regular CSS. Set them on a parent element to apply to all BEEQ components inside it, or on the element itself for a single instance.
Not all styling can be achieved with exposed custom properties. BEEQ components use Shadow DOM, so internal elements cannot be selected with regular CSS. If a property you need is missing, open an issue to request it.