All components (204)

Floating button

Actions · FloatingButton

What it is and when to use it

A standalone action that floats over the page, fixed in a corner: add a product, a new order, open the cart. Round if it only carries an icon; pill-shaped if it carries text. It enters by growing from its corner. FloatingGroup stacks several in the same corner and is the one that positions them.

When to use it

The action that has to be at hand across the whole screen, especially on mobile: "New order", "Add product".
corner chooses the corner: end-bottom (the default), start-bottom, end-top or start-top; start and end follow the direction of the language.
Two or three in the same corner, inside a FloatingGroup, so they do not overlap.

When not to

To go back to the top of the page: BackToTop, which appears only when scrolling down and takes the focus with it.
An action that belongs to a specific block goes in that block: Button.

Keyboard: it is a normal button: Tab reaches it, Enter and Space press it. It stays at the place in the DOM where it is put (it is not moved elsewhere): put it at the end, which is where the keyboard expects to find it. One fixed at the start of the content forces you to go through it on every screen.

Accessibility: the name is either seen or spoken: with text it does not accept label (the types do not allow it), because an aria-label different from the visible text breaks voice control; without text, label is required. The normal size already measures 44 px, the touch target (40, 44 or 56 px depending on size). There is no ghost variant: without a background, it would not be visible over the content. It does not appear when printing.

Fine-tuning: it redefines the Button variables on .amset-button-floating: --amset-button-height, --amset-button-radius, --amset-button-icon, --amset-button-padding and --amset-button-weight. The group is amset-floating-group.

On this page each story goes in its own frame: the button stays in the corner of that frame.

What it looks like

The button stays fixed in the corner of the screen; here, in the corner of this box.

<FloatingButton
  icon={<MoreIcon />}
  text="New order"
  corner="end-bottom"
  onPress={crearPedido}
/>

Props

Import it with import { FloatingButton } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`icon`required	`ReactNode`	—
`className`	`string`	—
`corner`	`FloatingCorner`	—
`disabled`	`boolean`	Out of play: it cannot be pressed, cannot be focused and is not in the tab order.
`excludeFromTabOrder`	`boolean`	Out of the tab order but pressable. For a button that duplicates something already in it: the one that opens the list of a search field, which does nothing the down arrow does not.
`label`	`string`	—
`loading`	`boolean`	Submitting state. The button stays focusable (`aria-disabled`), stops responding to presses and announces the change to the screen reader. It does not change width: the spinner goes over the text, not beside it.
`loadingLabel`	`string`	What is announced while the sending lasts.
`loadingText`	`string`	The text shown INSTEAD of the content while sending: "Saving…". No spinner on top: the text is the notice, and it is announced when it changes. It is what a front end did by swapping its `children` by hand. The button changes width if the new text is a different size.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—
`onPress`	`PressHandler`	—
`shape`	`"default" \| "pill"`	The shape: `default` (the default) or `pill`, with fully rounded corners. Inside a `ButtonGroup` only the outer corners of the group are rounded. For the round icon-only button, `IconButton`.
`size`	`"sm" \| "md" \| "lg"`	40, 44 or 56 px: never below the touch target at the normal size.
`style`	`CSSProperties`	Inline style. The stable look goes in the `--amset-button-*` CSS variables, which is what is maintained; this is for what is only known at run time: a colour chosen by whoever uses the application, a calculated position, a height that depends on the content. It used to be forbidden and had to be opened: a real front end used it on 40 buttons to calculate their halo from an arbitrary colour (AMS-735), and without it the only way out was to write CSS by hand against our classes.
`text`	`string`	—
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	—
`variant`	`"solid" \| "soft" \| "outline"`	It floats over the content: without a background it would not be seen, so there is no ghost.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: