Interface CommonProps

interface CommonProps {
    ariaLabel?: string;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    disabled?: boolean;
    elevation?: 0 | 1 | 2;
    id?: string;
    label: string;
    loading?: boolean;
    onClick?: ((event: MouseEvent<HTMLElement, MouseEvent>) => void);
    ref?: Ref<HTMLButtonElement>;
    selected?: boolean;
    startIcon?: string | ComponentClass<Omit<SVGProps<SVGSVGElement>, "ref"> & {
        ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
    }, any> | FunctionComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
        ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
    }>;
    sx?: SxProps<Theme>;
}

Properties

ariaLabel? customAttribute? disabled? elevation? id? label loading? onClick? ref? selected? startIcon? sx?

Properties

OptionalariaLabel

ariaLabel?: string

Aria label attribute for enhanced accessibility.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Add this for testing. Clickable and requested subcomponents will get suffixed with "-[ComponentName]".

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

Optionalelevation

elevation?: 0 | 1 | 2

Elevation of the chip. Used primarily in dark mode to handle modals and layers.

Optionalid

id?: string

label

label: string

The label text.

Optionalloading

loading?: boolean

If true, displays a loading skeleton instead of the chip content.

OptionalonClick

onClick?: ((event: MouseEvent<HTMLElement, MouseEvent>) => void)

Callback fired when chip is clicked.

Optionalref

ref?: Ref<HTMLButtonElement>

Ref forwarding to access the DOM element of the chip.

Optionalselected

selected?: boolean

If true, shows the chip in a visually selected state.

OptionalstartIcon

startIcon?: string | ComponentClass<Omit<SVGProps<SVGSVGElement>, "ref"> & {
    ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
}, any> | FunctionComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
    ref?: null | ((instance: null | SVGSVGElement) => void | (() => VoidOrUndefinedOnly)) | RefObject<SVGSVGElement>;
}>

Leading icon in the chip. Will be overwritten when in selected state.

Optionalsx

sx?: SxProps<Theme>

Custom styles applied to the chip.

Settings

Member Visibility

On This Page

Properties