'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Actions
HoldButton
Hold to confirm: a fill grows while it is held, and the action runs when it is full. For destructive actions without a dialog.
import { HoldButton } from '@alea/ui';
Examples
Hold to confirm
Press and hold with the pointer, Space or Enter; the fill grows and the action runs when it is full.
Nothing deleted yet
Configurations
Every value of every property, side by side. Numbers match the legend below.
- Justify
justify - Loading Position
loadingPosition - Shape
shape - Size
size - Tone
tone - Variant
variant
States
Each interaction state, forced so you can compare them, in both themes.
Dark
Light
Anatomy
The parts of the component and the class that styles each one.
Measurements
Measured from the rendered component at 2x: height, width, padding, radius and icon.
Every size and space is a multiple of 4 px.
Props
HoldButton props
Hold to confirm (the hold pattern): a fill grows while it is pressed, with pointer, Space or Enter, and the action runs when it is full. For destructive actions without a dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
onConfirmrequired | () => void | - | Runs when the button has been held the whole time. |
duration | number | 1200 | How long to hold, in ms. Default 1200. |
fullWidth | Responsive<boolean> | - | Stretches to the width of its container. Can change per breakpoint: { base: true, md: false } is full width on phones only. |
hint | string | - | Read by screen readers after the label. Default "Press and hold to confirm". |
href | string | - | Turns the button into a link that looks like a button. |
iconEnd | ReactNode | - | Icon after the label. |
iconStart | ReactNode | - | Icon before the label. |
justify | "start" | "center" | "between" | - | How the content sits in a wide button: center (default), start, or between (label left, end icon right). |
loadingLabel | ReactNode | - | Text to show next to the spinner while loading. Without it the spinner covers the label. |
loadingPosition | "start" | "end" | "center" | - | Where the spinner goes while loading: center (covers the label, default), start or end (takes the icon's place). |
rel | string | - | With href: the link relationship. |
ripple | boolean | - | A ripple grows from the pointer on press (the ripple pattern). |
shape | "pill" | "rounded" | "square" | - | pill (default), rounded (8 px) or square (4 px corners). |
shortcut | ReactNode | - | A keyboard shortcut shown at the end, like ⌘S (also set as aria-keyshortcuts when it is text). |
size | Responsive<"xs" | "sm" | "md" | "lg" | "xl"> | - | xs 28 px, sm 32 px, md 40 px (default), lg 48 px, xl 56 px. Can change per breakpoint: { base: 'lg', md: 'md' }. |
successLabel | ReactNode | - | The label while isSuccess. Default "Done". |
target | string | - | With href: where to open it. |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | "info" | - | The color of soft, ghost, text, dashed and link buttons, and of a solid primary: neutral (default), accent, success, warning, danger or info. |
variant | "ghost" | "primary" | "secondary" | "soft" | "text" | "dashed" | "danger" | "link" | 'danger' | primary: the dark gradient button (solid in its tone when tone is set); secondary: the chip (white on dark, black on light); soft: tinted; ghost: outlined; text: no border until hover; dashed: dashed outline; danger: destructive; link: text only. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
justifystartcenterbetweenloadingPositionstartendcentershapepillroundedsquaretonedangerneutralaccentsuccesswarninginfovariantghostprimarysecondarysofttextdasheddangerlink- Motion
- hold
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-hold
Accessibility
- Works with the pointer, Space and Enter: holding the key fills it, releasing early cancels.
- Its description says "Press and hold to confirm" (change it with hint).
- With reduced motion the fill still grows (it is the progress), without other movement.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves focus to the button |
| Space or Enter (hold) | Fills it; release before the end to cancel |
Do and don't
Do
- Use it for actions that are hard to undo but common enough that a dialog would annoy.
- Say what happens in the label: Delete project.
Don't
- Don't use it for routine actions.
- Don't make the duration longer than about 1.5 seconds.