carbon-react
Version:
A library of reusable React components for easily building user interfaces.
49 lines (48 loc) • 2.51 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import { TagProps } from "../../../__internal__/utils/helpers/tags";
export interface ButtonToggleGroupProps extends MarginProps, TagProps {
/** Unique id for the root element of the component */
id: string;
/** Toggle buttons to be rendered. Only accepts children of type ButtonToggle */
children?: React.ReactNode;
/** aria-label for the group wrapper. Required for accessibility when no text label is provided */
"aria-label"?: string;
/** Text for the visible label of the button group. */
label?: string;
/** [Legacy] Text for the label's help tooltip. */
labelHelp?: React.ReactNode;
/** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
labelSpacing?: 1 | 2;
/** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
inputHint?: React.ReactNode;
/** The percentage width of the ButtonToggleGroup. */
inputWidth?: number | string;
/** [Legacy] The text for the field help. */
fieldHelp?: string;
/** [Legacy] Sets the field help to inline. */
fieldHelpInline?: boolean;
/** [Legacy] Sets the label to be inline. */
labelInline?: boolean;
/** [Legacy] The percentage width of the label. */
labelWidth?: number;
/** If true all ButtonToggle children will flex to the full width of the ButtonToggleGroup parent */
fullWidth?: boolean;
/** Callback triggered by pressing one of the child buttons. */
onChange: (ev: React.MouseEvent<HTMLButtonElement>, value?: string) => void;
/** Determines which child button is selected */
value: string;
/** [Legacy] Aria label for rendered help component */
helpAriaLabel?: string;
/** Allow buttons within the group to be deselected when already selected, leaving no selected button */
allowDeselect?: boolean;
/** Disable all user interaction. */
disabled?: boolean;
/** @private @internal @ignore */
"data-component"?: string;
}
declare const ButtonToggleGroup: {
({ children, fieldHelp, fieldHelpInline, "aria-label": ariaLabel, label, labelHelp, labelSpacing, inputHint, inputWidth, fullWidth, labelInline, labelWidth, onChange, value, helpAriaLabel, id, allowDeselect, disabled, ...props }: ButtonToggleGroupProps): React.JSX.Element;
displayName: string;
};
export default ButtonToggleGroup;