Button Link
Borderless link-style buttons (.btn-link) with underline, supporting colors, sizes, shapes, and icons.
Notes
- Use
.btn-link for a transparent button with underline. Works on button, a, span elements, etc.
- Combine with
btn-link-* for themed links, e.g. btn-link-primary.
- Use
.btn-link-cjk for optimized CJK underline offset.
Basic usage
Button element
Span element
Span link
Disabled
Link CJK
btn-link (default underline offset)
btn-link-cjk (optimized offset for CJK)
Theme colors
Primary
Secondary
Success
Error
Info
Highlight
Shorthand: btn-link-*
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
Solid variant
btn-link-*
With icons
Left icon
Right icon
Use cases
Form actions
List actions
Navigation