如何在Vaadin 14中实现Button组件的链接样式显示？

Vaadin 14 完全可以实现将 Button 组件显示为链接样式，可实现行内展示、鼠标悬浮时文字显示下划线的效果，和 Vaadin 8 中button.setStyleName(VaaloTheme.BUTTON_LINK)的效果完全等效，具体实现方案如下：

方案一：使用内置主题变体（推荐） #

Vaadin 14 自带的 Lumo 主题已经封装了对应的按钮变体，直接调用API即可生效：

1. 导入对应的枚举类：

import com.vaadin.flow.component.button.ButtonVariant;

2. 给Button实例添加对应变体：

Button linkButton = new Button("按钮文本");
// 添加链接样式变体
linkButton.addThemeVariants(ButtonVariant.LUMO_LINK);

该方案自带适配：无默认按钮背景、边框，文字默认使用主题主色，悬浮自动显示下划线，禁用状态自动适配半透明不可点击样式，无需额外编写CSS。

方案二：自定义CSS样式（适合需要自定义效果的场景） #

如果需要调整链接的颜色、下划线样式等自定义效果，可以自己写CSS规则实现：

1. 在项目的前端公共样式文件（通常为frontend/styles/shared-styles.css）中添加样式规则：

/* 自定义链接按钮基础样式 */
.custom-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--lumo-primary-color);
  cursor: pointer;
  display: inline;
  text-decoration: none;
  font: inherit;
}
/* 悬浮时显示下划线 */
.custom-link-btn:hover {
  text-decoration: underline;
}
/* 可选：适配禁用状态 */
.custom-link-btn:disabled {
  color: var(--lumo-disabled-text-color);
  cursor: default;
  text-decoration: none;
  opacity: 0.7;
}

2. 在Java代码中给Button添加自定义样式类：

linkButton.addClassName("custom-link-btn");

两种方案都可以实现你需要的效果，无特殊自定义需求的情况下优先使用方案一即可。

内容的提问来源于stack exchange，提问作者tanderson