Styles

Mixins et styles

Override the key button design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component defaults. Token-based and self-contained.

Theming with hub-btn-theme

Mixin	Paramètres	Description
Theming
`hub-btn-theme()`	`$accent--hub-btn-accent` `$border-radius--hub-button-border-radius` `$padding-x--hub-button-padding-x` `$padding-y--hub-button-padding-y` `$font-size--hub-button-font-size`	One-call token theming for `<hub-button>` / `[hubBtn]`

Variables CSS

Personnalisez chaque pixel avec 52 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.

Buttons, FAB & dropdown

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

Variable	Par défaut	Type	Description
`--hub-button-border-radius`	`var(--hub-sys-radius-md, 0.375rem)`	length	Button border radius
`--hub-button-border-width`	`1.5px`	length	Button border width
`--hub-button-disabled-opacity`	`var(--hub-sys-opacity-disabled, 0.65)`	number	Tokens for the floating action button size, shadow, offset and z-index.
`--hub-button-font-size`	`var(--hub-ref-font-size-base, 1rem)`	length	Button font size
`--hub-button-font-weight`	`var(--hub-ref-font-weight-medium, 500)`	number	Button font weight
`--hub-button-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Background, text and border tokens for each variant. Semantic colours resolve from --hub-sys-color-<variant>-*.
`--hub-button-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Button padding x
`--hub-button-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Button padding y
`--hub-button-spinner-size`	`0.875em`	length	Button spinner size
`--hub-button-spinner-duration`	`0.7s`	transition	Button loading spinner spin duration
`--hub-button-spinner`	`url("data:image/svg+xml,…")`	url	Button loading spinner glyph (swappable SVG)
`--hub-button-transition`	`var(--hub-sys-transition-fast, all 0.15s ease-in-out)`	transition	Button transition
`--hub-btn-active-color`	`var(--hub-btn-accent-on)`	color	Pressed (:active) button text-color slot
`--hub-btn-active-border`	`transparent`	border	Pressed (:active) button border-color slot
`--hub-btn-active-bg`	`color-mix(in oklch, var(--hub-btn-accent) 70%, var(--hub-sys-color-ink, #212529))`	color	Pressed (:active) button background slot
`--hub-btn-hover-color`	`var(--hub-btn-accent-emphasis)`	color	Overridable button hover text-color slot
`--hub-btn-hover-border`	`transparent`	border	Overridable button hover border-color slot
`--hub-btn-hover-bg`	`var(--hub-btn-accent-subtle)`	color	Overridable button hover background slot
`--hub-dropdown-item-border-radius`	`var(--hub-sys-radius-sm, 0.25rem)`	length	Dropdown item border radius
`--hub-dropdown-item-disabled-opacity`	`0.45`	number	Dropdown item disabled opacity
`--hub-dropdown-item-hover-bg`	`var(--hub-sys-color-surface-subtle, #f8f9fa)`	color	Dropdown item hover bg
`--hub-dropdown-item-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Dropdown item padding x
`--hub-dropdown-item-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Dropdown item padding y
`--hub-dropdown-panel-bg`	`var(--hub-sys-color-surface-default, #fff)`	color	Dropdown panel bg
`--hub-dropdown-panel-border-color`	`var(--hub-sys-color-border-subtle, #dee2e6)`	color	Dropdown panel border color
`--hub-dropdown-panel-border-radius`	`var(--hub-sys-radius-md, 0.375rem)`	length	Dropdown panel border radius
`--hub-dropdown-panel-max-height`	`20rem`	length	Dropdown panel max height
`--hub-dropdown-panel-min-width`	`11.25rem`	length	Dropdown panel min width
`--hub-dropdown-panel-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Dropdown panel padding y
`--hub-dropdown-panel-shadow`	`var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175))`	shadow	Dropdown panel shadow
`--hub-dropdown-panel-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Dropdown panel z index
`--hub-fab-border-radius`	`50%`	length	Fab border radius
`--hub-fab-extended-height`	`3.5rem`	length	Fab extended height
`--hub-fab-extended-padding-x`	`1.25rem`	length	Fab extended padding x
`--hub-fab-extended-radius`	`1.75rem`	length	Fab extended radius
`--hub-fab-offset`	`var(--hub-ref-space-3, 1rem)`	length	Fab offset
`--hub-fab-shadow`	`var(--hub-sys-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	Fab shadow
`--hub-fab-shadow-hover`	`var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175))`	shadow	Fab shadow hover
`--hub-fab-size-large`	`4.5rem`	length	Fab size large
`--hub-fab-size-mini`	`2.5rem`	length	Fab size mini
`--hub-fab-size-standard`	`3.5rem`	length	Fab size standard
`--hub-fab-transition`	`box-shadow 0.2s ease, transform 0.15s ease`	transition	Fab transition
`--hub-fab-zindex`	`var(--hub-sys-zindex-fixed, 1030)`	number	Background, border, radius, shadow, hover and item-level tokens for the dropdown overlay.
`--hub-speed-dial-animation`	`0.2s ease`	transition	Speed dial animation
`--hub-speed-dial-gap`	`0.625rem`	length	Speed dial gap
`--hub-speed-dial-zindex`	`var(--hub-sys-zindex-fixed, 1030)`	number	Speed dial z index
`--hub-dropdown-divider-color`	`var(--hub-sys-color-border-subtle, #e2e8f0)`	color	Background color of the dropdown divider line
`--hub-speed-dial-label-bg`	`var(--hub-sys-color-ink, #212529)`	color	Background of the speed-dial item label chip (tooltip-style, theme-aware)
`--hub-speed-dial-label-color`	`var(--hub-sys-surface-page, #ffffff)`	color	Text color of the speed-dial item label chip
`--hub-dropdown-header-color`	`var(--hub-sys-color-text-subtle, #94a3b8)`	color	Text color of a dropdown section header
`--hub-dropdown-header-font-size`	`var(--hub-ref-font-size-xs, 0.75rem)`	length	Font size of a dropdown section header
`--hub-dropdown-header-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Horizontal padding of a dropdown section header