Skip to content

FormSubmit

Form submit button component with theme-aware styling and proper form association

Uses CSS custom properties from @sparkle/theme for consistent theming across light/dark modes and follows the same patterns as the Button component.

import { FormSubmit } from '@sparkle/ui'
PropTypeRequiredDefaultDescription
size"sm" | "md" | "lg" | undefinedSize variant for the submit button
variant"primary" | "secondary" | "outline" | undefinedVisual variant for the submit button
disabledboolean | undefinedWhether the submit button is disabled
childrenReact.ReactNodeSubmit button children content

This component uses CSS custom properties from @sparkle/theme for consistent styling across light and dark modes.

  • --theme-*: Uses theme design tokens for consistent styling

You can customize the appearance by:

  1. Theme Variables: Modify theme tokens in your @sparkle/theme configuration
  2. CSS Classes: Apply custom CSS classes via the className prop
  3. CSS-in-JS: Use styled-components or emotion with the component

This component follows accessibility best practices with proper ARIA attributes and keyboard support.