Interface CommonProps

interface CommonProps {
    background?: "transparent" | "white";
    capitalizeFirstLetter?: boolean;
    className?: string;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    disabled?: boolean;
    disableRipple?: boolean;
    expanded?: boolean;
    expandIconPosition?: "start" | "end";
    headingComponent?:
        | "h2"
        | "h3"
        | "h4"
        | "h5"
        | "h6";
    iconLeft?: FC<SVGProps<SVGSVGElement>>;
    id?: string;
    imageLeft?: ReactElement<any, string | JSXElementConstructor<any>>;
    isLoading?: boolean;
    lang?: "sv" | "en";
    onClick?: (() => void);
    primaryMeta?: ReactNode;
    primaryText: ReactNode;
    secondaryMeta?: ReactNode;
    setExpanded?: ((expanded: boolean) => void);
    sx?: SxProps<Theme>;
}

Hierarchy

  • Pick<AccordionProps,
        | "disabled"
        | "background"
        | "isLoading"
        | "lang">
    • CommonProps

Properties

background? capitalizeFirstLetter? className? customAttribute? disabled? disableRipple? expanded? expandIconPosition? headingComponent? iconLeft? id? imageLeft? isLoading? lang? onClick? primaryMeta? primaryText secondaryMeta? setExpanded? sx?

Properties

Optionalbackground

background?: "transparent" | "white"

Background color for the AccordionSummary

OptionalcapitalizeFirstLetter

capitalizeFirstLetter?: boolean

Determines whether the first letter should be capitalized.

OptionalclassName

className?: string

Optional CSS class name.

OptionalcustomAttribute

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

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

Optionaldisabled

disabled?: boolean

If true, the component is disabled.

OptionaldisableRipple

disableRipple?: boolean

If true, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class.

Optionalexpanded

expanded?: boolean

The current state of the accordion (expanded or collapsed). Managed in parent element (Accordion).

OptionalexpandIconPosition

expandIconPosition?: "start" | "end"

Override default position (right) of expand icon.

OptionalheadingComponent

headingComponent?:
    | "h2"
    | "h3"
    | "h4"
    | "h5"
    | "h6"

Component for a visually hidden heading before the AccordionSummary button. Defaults to "h2". Set to appropriate level depending on page context.

OptionaliconLeft

iconLeft?: FC<SVGProps<SVGSVGElement>>

Optional icon shown to the left of the primary text. If both iconLeft and imageLeft are provided, iconLeft takes precedence.

Optionalid

id?: string

A unique ID. Used for setting WAI-ARIA properties.

OptionalimageLeft

imageLeft?: ReactElement<any, string | JSXElementConstructor<any>>

Custom image displayed to the left of the primary text. If both iconLeft and imageLeft are provided, iconLeft takes precedence.

OptionalisLoading

isLoading?: boolean

If true, a loading skeleton will be rendered instead of the component.

Optionallang

lang?: "sv" | "en"

Language used for internal translations.

OptionalonClick

onClick?: (() => void)

Click event of the AccordionSummary button.

OptionalprimaryMeta

primaryMeta?: ReactNode

Optional text that provides additional information, displayed to the right of the primary text.

primaryText

primaryText: ReactNode

Main text to be displayed in the accordion summary.

OptionalsecondaryMeta

secondaryMeta?: ReactNode

Optional secondary text that provides further details, displayed to the right of the primary text but below primaryMeta.

OptionalsetExpanded

setExpanded?: ((expanded: boolean) => void)

Function for changing the state of the accordion. Managed in parent element (Accordion).

Optionalsx

sx?: SxProps<Theme>

Settings

Member Visibility

On This Page

Properties