Skip to content

components/bits/AdaptiveButton#

AdaptiveButton()#

function AdaptiveButton(props): Element;

Parameters#

Parameter Type
props AdaptiveButtonProps

Returns#

Element

AdaptiveGroupContext#

const AdaptiveGroupContext: React.Context<AdaptiveGroupContextValue>;

AdaptiveButtonProps#

Extends#

  • Omit<MuiButtonProps, "children">

Indexable#

[key: string]: MuiButtonProps

[key: number]: MuiButtonProps

[key: symbol]: MuiButtonProps

Properties#

forceMode?#

optional forceMode?: DisplayMode;

Force a specific display mode (escape hatch / standalone use).

icon?#

optional icon?: ElementType<any, keyof IntrinsicElements>;

Icon component. Required for icon-only mode.

iconPosition?#

optional iconPosition?: "start" | "end";

Which side the icon sits on (default 'start')

kind?#

optional kind?: "blue" | "green" | "red" | "default";

Colour variant reusing existing CSS-variable styled bases

label#

label: string;

Full text label (always shown in tooltip)

labelShort?#

optional labelShort?: string;

Abbreviated label for medium widths. Falls back to label when omitted.

pinned?#

optional pinned?: boolean;

Never collapse this button.

priority?#

optional priority?: number;

Collapse priority — higher number = collapses later. Default 0.

shortcutHint?#

optional shortcutHint?: string;

Keyboard shortcut hint shown when Alt is held

tooltip?#

optional tooltip?: string;

Tooltip text. Defaults to label.

tooltipPlacement?#

optional tooltipPlacement?: any;

Tooltip placement

AdaptiveButtonRegistration#

Properties#

hasIcon#

hasIcon: boolean;

hasShortLabel#

hasShortLabel: boolean;

measuredWidths?#

optional measuredWidths?: {
  full: number;
  icon: number;
  short: number;
};

Measured natural widths for each display mode (px)

full#
full: number;
icon#
icon: number;
short#
short: number;

pinned#

pinned: boolean;

priority#

priority: number;

AdaptiveGroupContextValue#

Properties#

getMode#

getMode: (id) => DisplayMode | undefined;

Get the computed display mode for a button, or undefined if standalone

Parameters#
Parameter Type
id string
Returns#

DisplayMode | undefined

register#

register: (id, config) => void;

Register a button so the group can manage it

Parameters#
Parameter Type
id string
config AdaptiveButtonRegistration
Returns#

void

unregister#

unregister: (id) => void;

Unregister on unmount

Parameters#
Parameter Type
id string
Returns#

void

AdaptiveGroupEntry#

Properties#

id#

id: string;

mode#

mode: DisplayMode;

DisplayMode#

type DisplayMode = "full" | "short" | "icon";