Display LitRenderer grid cell button as a link in Vaadin 24

Question

I have a button inside a grid cell defined as follows:

private static Renderer<LogRecord> createStatusRenderer(Grid<LogRecord> grid) {
    return LitRenderer
            .<LogRecord> of("<vaadin-button theme=\"${item.style}\" @click=\"${handleClick}\">${item.status}</vaadin-button>")
            .withProperty("style", r -> r.isFailed() ? "error" : "success")
            .withProperty("status", ComponentLogRecord::getStatus)
            .withFunction("handleClick", r -> {
                 if (r.hasMessage()) grid.setDetailsVisible(r, !grid.isDetailsVisible(r));
            });
}

Could you please advice how to modify that code in order to achieve the following:

1. Display error button as a link (of red color).
2. Display OK button as a simple text of green color.
3. (alternative to 1) Display error button as simple text of red color with arrow down suffix.

My goal is to display a button as a simple grid cell text but advice user to click on error buttons to show error details.

I tried this approach, but without success. "tertiary-inline" theme works but it's not quite clear how to specify additional style class in template. Also "text-decoration: underline;" doesn't work even if I specify it directly in browser developer console ...

Thanks in advance

Answer 1

Below is the sollution I finally implemented. I was not able to implement underline but implemented an icon. May be it is not the best one but working and probably would be useful for somebody.

        return LitRenderer.<LogRecord> of("""
                    <vaadin-button theme="${item.theme}" style="font-weight: 400" @click="${handleClick}"> \
                        <vaadin-icon icon="${item.icon}" slot="suffix"></vaadin-icon> \
                        ${item.status} \
                    </vaadin-button>
                    """)
                .withProperty("theme", r -> r.isError() ? "tertiary-inline error" : "tertiary-inline success")
                .withProperty("status", LogRecord::getStatus)
                .withProperty("icon", r -> r.isError() ? "vaadin:angle-down" : "")
                .withFunction("handleClick", r -> {
                    if (r.hasMessage()) grid.setDetailsVisible(r, !grid.isDetailsVisible(r));
                });