Interface ControlButtonsComponentOptions

interface ControlButtonsComponentOptions {
    buttons: Button[];
    buttonColor?: string;
    buttonBackgroundColor?: {
        default?: string;
        pressed?: string;
    };
    alignment?:
        | "space-around"
        | "space-between"
        | "space-evenly"
        | "center"
        | "flex-end"
        | "flex-start";
    vertical?: boolean;
    buttonsContainerStyle?: CSSProperties;
    alternateIconComponent?: Element;
    containerProps?: HTMLAttributes<HTMLDivElement>;
    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
    buttonStyle?: CSSProperties;
    buttonClassName?: string;
    iconWrapperProps?: HTMLAttributes<HTMLSpanElement>;
    textProps?: HTMLAttributes<HTMLSpanElement>;
    contentWrapperProps?: HTMLAttributes<HTMLDivElement>;
    renderButton?: ((options: {
        index: number;
        button: Button;
        defaultButton: ReactNode;
        defaultProps: ButtonHTMLAttributes<HTMLButtonElement>;
        vertical: boolean;
    }) => ReactNode);
    renderButtonContent?: ((options: {
        index: number;
        button: Button;
        defaultIcon: ReactNode;
        defaultLabel: ReactNode;
        defaultContent: ReactNode;
        vertical: boolean;
    }) => ReactNode);
    gap?: string | number;
}

Properties

buttons buttonColor? buttonBackgroundColor? alignment? vertical? buttonsContainerStyle? alternateIconComponent? containerProps? buttonProps? buttonStyle? buttonClassName? iconWrapperProps? textProps? contentWrapperProps? renderButton? renderButtonContent? gap?

Properties

buttons

buttons: Button[]

OptionalbuttonColor

buttonColor?: string

OptionalbuttonBackgroundColor

buttonBackgroundColor?: {
    default?: string;
    pressed?: string;
}

Optionalalignment

alignment?:
    | "space-around"
    | "space-between"
    | "space-evenly"
    | "center"
    | "flex-end"
    | "flex-start"

Optionalvertical

vertical?: boolean

OptionalbuttonsContainerStyle

buttonsContainerStyle?: CSSProperties

OptionalalternateIconComponent

alternateIconComponent?: Element

OptionalcontainerProps

containerProps?: HTMLAttributes<HTMLDivElement>

OptionalbuttonProps

buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>

OptionalbuttonStyle

buttonStyle?: CSSProperties

OptionalbuttonClassName

buttonClassName?: string

OptionaliconWrapperProps

iconWrapperProps?: HTMLAttributes<HTMLSpanElement>

OptionaltextProps

textProps?: HTMLAttributes<HTMLSpanElement>

OptionalcontentWrapperProps

contentWrapperProps?: HTMLAttributes<HTMLDivElement>

OptionalrenderButton

renderButton?: ((options: {
    index: number;
    button: Button;
    defaultButton: ReactNode;
    defaultProps: ButtonHTMLAttributes<HTMLButtonElement>;
    vertical: boolean;
}) => ReactNode)

OptionalrenderButtonContent

renderButtonContent?: ((options: {
    index: number;
    button: Button;
    defaultIcon: ReactNode;
    defaultLabel: ReactNode;
    defaultContent: ReactNode;
    vertical: boolean;
}) => ReactNode)

Optionalgap

gap?: string | number

Settings

Member Visibility

On This Page

Properties