FormActions

The button row at the end of a form, with the result of the last submit. Put the main button last.

FormActions

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, FormActions

You have unsaved changes

Dark theme, FormActions

You have unsaved changes

High contrast theme, FormActions

You have unsaved changes

UsageLink to the section Usage

tsx

import { FormActions } from '@skribly/ui/forms'

tsx

<FormActions status={{ tone: 'ok', message: 'Saved' }}>
  <Button variant="outline">Cancel</Button>
  <Button type="submit">Save</Button>
</FormActions>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A failed save is an assertive alert; ok, info and warn messages are polite.
Each message has an icon and words.
Both regions stay mounted, so a message that appears later is announced.
Buttons stack at full width on a narrow screen with the main one on top.

This demo runs through axe in all three themes on every test run. See what the tests check.