ButtonItem displays its name property behind the icon

[Hirn]

When a ButtonItem is configured to display only an icon (showTitle="false"), the value of the name property is still rendered as text behind the icon.

Code used to create the ButtonItem:

                    <ButtonItem ID="reloadProjects" name="reloadProjects" width="200" adaptWidth={false}
                      icon={`${CONSTANT.BUTTONS_ICONS}refresh.png`} prompt={Strings.get("loadProject")}
                      baseStyle="imgButton" showTitle="false" startRow="false"
                      click={this.reloadProjects.bind(this)}
                    />

The text reloadProjects (the value of the name property) is visible behind the button icon.

[Hirn]

The same issue is reproducible with CheckboxItem as well.

[Isomorphic]

In both cases, the showTitle property relates to the FormItem's title-cell, not the text you're looking at.

For ButtonItem, set title: "" or buttonProperties: { title: "" } to clear the text - and for CheckboxItem, set title: "", or showLabel: false, or showTitle: false as well as labelAsTitle: true - see the docs for more information.

[Hirn]

I tried all of the options you suggested and here are the results.

If I only set showLabel, showTitle, or labelAsTitle without explicitly setting title: "", the text containing the component's name value is still rendered.

If I set title: "", the generated text is replaced with  , but the text element is still present and increases the width of the ButtonItem.

There is a workaround where I remove the name property from the ButtonItem. In that case, a completely empty text node is generated and the issue disappears. However, this is not a viable solution for me because I need to access the button by its name.

Based on this behavior, it appears that the framework falls back to rendering the name property whenever no explicit title is provided.

[Hirn]

While reviewing the source code, I found the function that is called by ButtonItem during rendering.

    //> @method formItem.getTitle() (A)
    // Returns the title HTML for this item.
    // @return (HTMLString) title for the formItem
    // @group drawing
    // @visibility external
    //<
    getTitle : function () {
        var undef;
        if (!this.form) return;
        // allow a developer to actually specify a null title, but showTitle true as an obvious
        // way to leave alignment all the same but not show annoying ":" next to the title cell.
        var title = this[this.form.titleField]
        if (title !== undef) {
            // Map "" to nbsp to avoid rendering oddities like mismatched heights
            // when title has been set to an explicit empty string
            if (isc.isA.emptyString(title)) title = "&nbsp;"
            return title;
        }
        if (!this._autoAssignedName) return this.name;
    },

[Isomorphic]

You're describing very long-standing behavior here - we're taking a look and may make some improvements.

In the meantime, you can use a different constructor with appropriate settings to get a "button with a centered icon":

isc.DynamicForm.create({
    fields: [
        {name: "button", editorType: "ButtonItem",
            // use an isc.Img (or ImgButton) rather than a Button
            buttonConstructor: "Img",
            // set the button style, a width and an icon, and remove the padding so the icon is centered
            buttonProperties: {baseStyle: "button", width: 32, src: "Chevron_Up", padding: 0}
        }
    ]
});

[Isomorphic]

In fact, we've already applied a fix for this icon-only button centering issue, and it will hit tomorrow's builds.

The three separate options we gave you for CheckboxItem already work.

You didn't mention your product version, which is always important information - we'll port back to 13.1.

[Hirn]

thanks a lot for the suggested solution.
I forgot to specify that the version of the component I'm using is Version v13.1p_2026-03-13/ Pro

[Isomorphic]

It turns out, we have reverted the change we made today, because it's not needed - to get an "icon only" button, with the icon properly centered, just set button.title to null, instead of "", and it will work out of the box.

We've updated the docs to make this clear.