All components (204)
Text action
Actions · TextButton · .amset-textbutton
What it is and when to use it
An action that looks like a link and sits inside a sentence: "This subject is not on this device. Go back to your downloads.", "If you change it, the draft is lost. Leave it". It is a real <button> with the look and tones of Link, without the box and padding of Button.
When to use it
- For something that changes state, not place, and reads as part of a sentence: undo, retry, resend, leave it.
tone="ink"inside a table or a list;tone="error"for what discards or deletes.
When not to
- To go to another place: that is a
Link. If it changes place, link; if it changes state, button. - For the main action of a screen or a form: that is a
Button. A text action does not look like the one to press. - For a long text: a
<button>is always an inline box and does not split across two lines. Keep it to two or three words.
Keyboard: Tab reaches it; Enter and Space activate it, unlike a link, which only answers to Enter. That is what a screen reader user hears: "button", not "link".
Accessibility: it comes underlined and bold for the same reason as Link: inside a paragraph colour cannot be the only thing that sets it apart (WCAG 1.4.1). It inherits the size and line height of the text, so it does not throw the sentence off; on touch screens the target grows to 44 px without moving the text. By default it is type="button": a native button inside a form submits it. While loading it stays focusable (aria-disabled) but does not respond.
Fine-tuning: --amset-textbutton-color and --amset-textbutton-offset.
What it looks like
The orders could not be loaded.
<p>
No se pudieron cargar los pedidos.{" "}
<TextButton tone="accent" onPress={reintentar}>Retry</TextButton>
</p>Props
Import it with import { TextButton } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | — |
className | string | Merged with the library classes; it does not replace them. |
disabled | boolean | Disabled: it leaves the tab order and does not respond. |
loading | boolean | While submitting: it stays focusable (`aria-disabled`) but does nothing, and does not submit a form twice. |
onClick | MouseEventHandler<HTMLButtonElement> | — |
onPress | PressHandler | — |
ref | Ref<HTMLButtonElement> | The `<button>` node, for whoever mounts it. |
tone | "accent" | "secondary" | "tertiary" | "error" | "ink" | The same tones as `Link`: `accent` by default, `ink` inside a table or a list. |
type | "button" | "submit" | "reset" | Defaults to `button`: a native `<button>` inside a form submits the form. |
underline | LinkUnderline | By default `always`: inside a sentence colour is not enough to see that it can be pressed (WCAG 1.4.1). `hover` underlines it when the mouse is over it and `none` removes it, for an action that is not in the middle of a text. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-textbutton-color | var(--amset-accent-text) |
--amset-textbutton-offset | 0.15em |
How to change it
.amset-textbutton {
--amset-textbutton-color: ...;
--amset-textbutton-offset: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: