Actions
Everything a person presses to do something: buttons and their states, links that look like buttons, copy, close, grouped and toggled actions, keyboard hints and the handles that reorder lists. Built to WCAG 2.2 AA as a target: visible focus, 24px minimum targets, keyboard for every action and states said in words, not colour alone.
12 pages, 12 exports
- Button
- ToggleButton
- LinkButton
- IconButton
- CloseButton
- CopyButton
- ButtonGroup
- Kbd
- KeyCombo
- DragHandle
- NudgeButtons
- GatedAction
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Button, ToggleButton, LinkButton, IconButton, … } from '@skribly/ui/actions'Pages in this groupLink to the section Pages in this group
- ButtonThe default way to run an action. Use primary for the one main action of a view, outline or ghost for the rest, danger for removal and danger-solid only to confirm something that cannot be undone.Button
- ToggleButtonA button that stays on or off, for view options such as wrapping lines or showing only your items. Use a Switch for settings that save.ToggleButton
- LinkButtonNavigation that needs the weight of a button, such as "Read the guide" on an empty page. If it changes data rather than the page, use Button.LinkButton
- IconButtonA square button with only an icon, for toolbars and dense rows where the icon is well known. Prefer a labelled Button when there is room.IconButton
- CloseButtonCloses or dismisses the thing it sits in: a notice, a panel or a dialog. Inside a React Aria Dialog, slot="close" closes it with no handler.CloseButton
- CopyButtonCopies a command, key or link to the clipboard and confirms it. Use it next to text people are likely to paste elsewhere.CopyButton
- ButtonGroupKeeps related buttons together. Spaced for sets of separate actions, attached for a segmented look, toolbar for a strip of tools, and stackOnNarrow for form footers that should go full width on a phone.ButtonGroup
- KbdShows one key in running text or in a hint. Use KeyCombo for a combination.Kbd
- KeyComboA keyboard shortcut: keys pressed together, a sequence, or several shortcuts that do the same thing. Use it in menus, tooltips and help pages.KeyCombo
- DragHandleThe grip that drags an item in a sortable React Aria GridList, Table or Tree. Always pair dragging with a second way to reorder, such as NudgeButtons, for people who cannot drag.DragHandle
- NudgeButtonsOne step up and one step down: the keyboard and single-pointer way to reorder a list, next to or in place of dragging (WCAG 2.5.7). Horizontal lists use left and right.NudgeButtons
- GatedActionAn action that is not available yet, with the reason and what unlocks it. Use it instead of a silently disabled button whenever the person can do something about it.GatedAction