Interface CommonProps

interface CommonProps {
    alignItems?: "start" | "end";
    badge?: ReactElement<BadgeProps, string | JSXElementConstructor<any>> | ReactElement<BadgeProps, string | JSXElementConstructor<any>>[];
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    id?: string;
    isLoading?: boolean;
    m: ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)>);
    mb: ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)>);
    ml: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>);
    mr: ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)>);
    mt: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>);
    mx: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>);
    my: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>);
    subtitle?: ReactNode;
    title: ReactNode;
    titleComponent?: ElementType<any, (keyof IntrinsicElements)>;
}

Hierarchy

  • MarginProps
    • CommonProps

Properties

alignItems? badge? customAttribute? id? isLoading? m mb ml mr mt mx my subtitle? title titleComponent?

Properties

OptionalalignItems

alignItems?: "start" | "end"

The flex layout align items.

Optionalbadge

badge?: ReactElement<BadgeProps, string | JSXElementConstructor<any>> | ReactElement<BadgeProps, string | JSXElementConstructor<any>>[]

Badge to display in the title.

OptionalcustomAttribute

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

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

Optionalid

id?: string

ID for the title element.

OptionalisLoading

isLoading?: boolean

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

m

m: ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(Margin<string | number> | readonly NonNullable<Margin<string | number> | undefined>[] | undefined)>)

mb

mb: ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginBottom<string | number> | readonly NonNullable<MarginBottom<string | number> | undefined>[] | undefined)>)

ml

ml: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>)

mr

mr: ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginRight<string | number> | readonly NonNullable<MarginRight<string | number> | undefined>[] | undefined)>)

mt

mt: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>)

mx

mx: ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginLeft<string | number> | readonly NonNullable<MarginLeft<string | number> | undefined>[] | undefined)>)

my

my: ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)> | ((theme: {}) => ResponsiveStyleValue<(MarginTop<string | number> | readonly NonNullable<MarginTop<string | number> | undefined>[] | undefined)>)

Optionalsubtitle

subtitle?: ReactNode

Subtitle displayed below the title. A string is preferred, but React.ReactNode can be used for special cases, like combining text with icons.

title

title: ReactNode

The main title text. A string is preferred, but React.ReactNode can be used in special cases, such as combining text and icons.

OptionaltitleComponent

titleComponent?: ElementType<any, (keyof IntrinsicElements)>

Change the component of the Title element. Use this to separate styling from semantics, for instance if you need an H2 heading to look like an H3.

Settings

Member Visibility

On This Page

Properties