;
};
This page covers the three techniques you reach for when customizing a specific component: shadow DOM parts, global token overrides, and component-level CSS variables. For building a full custom theme or understanding the complete token system, see the [Theming](/theming/themes-and-modes) section.
The examples use inline `
Custom button
`}
>
```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
.custom-button::part(label) {
font-size: var(--bq-font-size--xl);
font-weight: var(--bq-font-weight--semibold);
}
.custom-button::part(button) {
background-color: var(--bq-magenta-600);
border-radius: var(--bq-radius--full);
padding-block: var(--bq-spacing-xl);
padding-inline: var(--bq-spacing-xxl);
}
```
```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}}
Custom button
```
```tsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { BqButton } from "@beeq/react";
import "./styles.css";
export function Example() {
return Custom button;
}
```
```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { Component } from "@angular/core";
import { BqButton } from "@beeq/angular/standalone";
@Component({
selector: "app-example",
standalone: true,
imports: [BqButton],
template: `
Custom button
`,
styles: [`
.custom-button::part(label) {
font-size: var(--bq-font-size--xl);
font-weight: var(--bq-font-weight--semibold);
}
.custom-button::part(button) {
background-color: var(--bq-magenta-600);
border-radius: var(--bq-radius--full);
padding-block: var(--bq-spacing-xl);
padding-inline: var(--bq-spacing-xxl);
}
`],
})
export class ExampleComponent {}
```
```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Custom button
```
### Inspecting parts from JavaScript
Parts are also queryable from JavaScript when you need to reach into component internals programmatically:
```ts theme={"theme":{"light":"one-light","dark":"night-owl"}}
const bqButton = document.querySelector(".custom-button");
const nativeButton = bqButton?.shadowRoot?.querySelector('[part="button"]');
```
## Global CSS custom properties
BEEQ relies on CSS custom properties to maintain a consistent visual system across components. A single global token like `--bq-brand` cascades through colours, focus rings, borders, and related states — so overriding it at the root level changes the look of your whole product at once:
```css theme={"theme":{"light":"one-light","dark":"night-owl"}}
:root {
--bq-brand: var(--bq-orange-600);
}
```
bq-button::part(button) {
--bq-ui--brand: var(--bq-orange-600) !important;
}
Primary button
`}
>
```css styles.css icon="css" theme={"theme":{"light":"one-light","dark":"night-owl"}}
:root {
--bq-brand: var(--bq-orange-600);
}
```
```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}}
Primary button
```
```tsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { BqButton } from "@beeq/react";
import "./styles.css";
export function Example() {
return Primary button;
}
```
```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { Component } from "@angular/core";
import { BqButton } from "@beeq/angular/standalone";
@Component({
selector: "app-example",
standalone: true,
imports: [BqButton],
template: `
Primary button
`,
styles: [`
:root {
--bq-brand: var(--bq-orange-600);
}
`],
})
export class ExampleComponent {}
```
```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Primary button
```
## Component-level CSS custom properties
Component-level CSS variables are scoped to a single component instance and do not affect the rest of the theme. For a full explanation of override strategies — including how to apply changes across all instances of a component at once — see [Component CSS Variables](/theming/component-css-variables).
In the example below, the second button overrides one brand token locally while the first keeps the theme default:
.primary-magenta {
--bq-ui--brand: var(--bq-magenta-600);
}
Primary button
Primary custom
`}
>
```css styles.css icon="css" theme={"theme":{"light":"one-light","dark":"night-owl"}}
.primary-magenta {
--bq-ui--brand: var(--bq-magenta-600);
}
```
```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}}
Primary button
Primary custom
```
```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { BqButton } from "@beeq/react";
import "./styles.css";
export function Example() {
return (
<>
Primary button
Primary custom
);
}
```
```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { Component } from "@angular/core";
import { BqButton } from "@beeq/angular/standalone";
@Component({
selector: "app-example",
standalone: true,
imports: [BqButton],
template: `
Primary button
Primary custom
`,
styles: [`
.primary-magenta {
--bq-ui--brand: var(--bq-magenta-600);
}
`],
})
export class ExampleComponent {}
```
```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Primary button
Primary custom
```
Some components also expose CSS variables that scope to that component only — not global tokens. You'll find them listed in each component's API reference under CSS custom properties.
## Combining component variables and parts
Combine component CSS variables and `::part()` selectors when token overrides alone aren't enough — you get scoped sizing control and structural styling from a single class.
.larger-button {
--bq-button--small-height: 42px;
--bq-button--small-paddingY: 10px;
--bq-button--small-paddingX: var(--bq-spacing-l);
--bq-button--medium-height: 53px;
--bq-button--medium-paddingY: 14px;
--bq-button--medium-paddingX: var(--bq-spacing-xl);
--bq-button--large-height: 60px;
--bq-button--large-paddingY: 18px;
--bq-button--large-paddingX: var(--bq-spacing-xxl);
--bq-ui--brand: #192b37;
--bq-focus: #192b37;
}
.larger-button::part(button) {
border-radius: var(--bq-radius--full);
}
.larger-button::part(label) {
font-size: var(--bq-font-size--l);
}
Button
Button
Button
`}
>
```css styles.css icon="css" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
.larger-button {
--bq-button--small-height: 42px;
--bq-button--small-paddingY: 10px;
--bq-button--small-paddingX: var(--bq-spacing-l);
--bq-button--medium-height: 53px;
--bq-button--medium-paddingY: 14px;
--bq-button--medium-paddingX: var(--bq-spacing-xl);
--bq-button--large-height: 60px;
--bq-button--large-paddingY: 18px;
--bq-button--large-paddingX: var(--bq-spacing-xxl);
--bq-ui--brand: #192b37;
--bq-focus: #192b37;
}
.larger-button::part(button) {
border-radius: var(--bq-radius--full);
}
.larger-button::part(label) {
font-size: var(--bq-font-size--l);
}
```
```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
Button
Button
Button
```
```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { BqButton } from "@beeq/react";
import "./styles.css";
export function Example() {
return (
<>
Button
Button
Button
);
}
```
```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
import { Component } from "@angular/core";
import { BqButton } from "@beeq/angular/standalone";
@Component({
selector: "app-example",
standalone: true,
imports: [BqButton],
template: `
Button
Button
Button
`,
styles: [`
.larger-button {
--bq-button--small-height: 42px;
--bq-button--small-paddingY: 10px;
--bq-button--small-paddingX: var(--bq-spacing-l);
--bq-button--medium-height: 53px;
--bq-button--medium-paddingY: 14px;
--bq-button--medium-paddingX: var(--bq-spacing-xl);
--bq-button--large-height: 60px;
--bq-button--large-paddingY: 18px;
--bq-button--large-paddingX: var(--bq-spacing-xxl);
--bq-ui--brand: #192b37;
--bq-focus: #192b37;
}
.larger-button::part(button) {
border-radius: var(--bq-radius--full);
}
.larger-button::part(label) {
font-size: var(--bq-font-size--l);
}
`],
})
export class ExampleComponent {}
```
```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}
ButtonButtonButton
```
## Where to find component styling hooks
Not every component exposes the same CSS variables or parts. When a component does expose them, you can find them in:
* the component page's API reference
* the component source in [GitHub](https://github.com/Endava/BEEQ/tree/main/packages/beeq/src/components) under `packages/beeq/src/components/**/scss/*.variables.scss`
## Best practices
When a change should apply across the whole product, override a global token like `--bq-brand`. One change cascades through every component that derives from it.
Repeating the same CSS variable on every component instance makes the theme harder to update and easy to get out of sync.
Use a specific class selector so your override only applies where you intend it — not to every instance of the component on the page.
Targeting `bq-button` or `:root` for a one-off change affects every instance globally. Scope exceptions with a class.
Shadow DOM parts give you structural access to component internals. Use them when the exposed CSS variables don't cover what you need.
`::part()` couples your styles to component internals. If a CSS variable covers the change, prefer that — it's less likely to break across BEEQ updates.
Review your overrides in both colour modes to make sure contrast, hierarchy, and focus states still hold up.
Overrides that look correct in light mode often break contrast or colour hierarchy in dark mode.