Member Junction
    Preparing search index...

    Interface FormToolbarItemConfig

    Configuration for registering or customizing a form toolbar item (action button).

    Supports dynamic predicates for visibility, enabled/disabled state (with optional disabled reason tooltips), badges, and async click handlers.

    interface FormToolbarItemConfig {
        Badge?:
            | string
            | number
            | ((record: BaseEntity) => string | number | null | undefined);
        CssClass?: string;
        Description?: string;
        Disabled?:
            | string
            | boolean
            | ((record: BaseEntity, editMode: boolean) => string | boolean);
        Icon?: string;
        IsLoading?: boolean | ((record: BaseEntity, editMode: boolean) => boolean);
        Key: string;
        Mode?: ToolbarItemMode;
        OnClick?: (event: FormToolbarItemClickEventArgs) => void | Promise<void>;
        Order?: number;
        Placement?: ToolbarItemPlacement;
        Text?: string;
        Variant?: ToolbarItemVariant;
        Visible?: boolean | ((record: BaseEntity, editMode: boolean) => boolean);
    }
    Index

    Properties

    Badge? CssClass? Description? Disabled? Icon? IsLoading? Key Mode? OnClick? Order? Placement? Text? Variant? Visible?

    Properties

    Badge?:
        | string
        | number
        | ((record: BaseEntity) => string | number | null | undefined)

    Optional badge count or text (e.g. "v3", 5).

    CssClass?: string

    Optional custom CSS class name to append to the button element.

    Description?: string

    Tooltip text shown on hover when enabled.

    Disabled?:
        | string
        | boolean
        | ((record: BaseEntity, editMode: boolean) => string | boolean)

    Whether the button is disabled. Can be:

    • boolean: true = disabled, false = enabled
    • string: disabled, and the string is used as the tooltip explaining why (e.g. "Save draft changes first")
    • predicate function: returning boolean or reason string Default: false.
    Icon?: string

    FontAwesome icon class (e.g. "fa-solid fa-check-double", "fa-solid fa-calculator").

    IsLoading?: boolean | ((record: BaseEntity, editMode: boolean) => boolean)

    Whether to display a loading spinner on the button while an operation is in progress.

    Key: string

    Unique identifier for this toolbar item (e.g. 'confirm-order', 'post', 'edit').

    Mode?: ToolbarItemMode

    In which mode(s) this button should appear. Default: 'read'.

    OnClick?: (event: FormToolbarItemClickEventArgs) => void | Promise<void>

    Handler function invoked when the button is clicked.

    Order?: number

    Numeric sort order within its placement group. Lower numbers appear first. Standard built-in items default to:

    • edit: 10
    • delete: 20
    • favorite: 30
    • history: 40
    • list: 50
    • tags: 60
    • attachments: 70 Custom action items default to 100 unless specified (e.g. 5 to appear before Edit).
    Placement?: ToolbarItemPlacement

    Placement group in the toolbar. Default: 'actions'.

    OptionalText

    Text?: string

    Optional button label text (e.g. "Confirm Order").

    Variant?: ToolbarItemVariant

    Visual styling variant. Default: 'default' (or 'primary' for key actions).

    Visible?: boolean | ((record: BaseEntity, editMode: boolean) => boolean)

    Whether the button is visible. Can be a boolean or a reactive predicate function. Default: true.

    Settings

    Member Visibility

    On This Page

    Properties