Components
TextButton
A button that looks like plain text
Overview
TextButton is a button with no background or padding. The text style comes from the Text you put inside. On hover it underlines, and keyboard focus shows the outside focus ring.
Basic
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
onClick | MouseEventHandler<HTMLButtonElement> | - | No | Click handler |
children | ReactNode | - | Yes | Text (usually Text) |
className | string | - | No | Extra CSS class |
Specification
base
| 상태 | 요소 | 속성 | 값 |
|---|---|---|---|
| hover | root | textDecoration | underline토큰 아님 — underline is not tokenized |
| focusVisible | root | outlineWidth | $size.stroke.focus |
| focusVisible | root | outlineStyle | solid토큰 아님 — no line style token |
| focusVisible | root | outlineColor | $color.border.focus.default |
| focusVisible | root | outlineOffset | 2px토큰 아님 — no ring offset token |
Usage Guidelines
Do
- Use it when a title or label itself opens something
- Keep the text short enough to read as an action
Don't
- Don't use it for the main action of a screen. Use Button
- Don't use it to navigate to another page. Use a link