Form Actions
Standard and sticky form action footer.
Overview
The Form Actions component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.
Why this exists
This component provides a reusable, accessible primitive for form-actions use cases within the Byteion design system.
Mental model
Think of this component as a building block. Compose it with other Byteion primitives to build complex interfaces.
When to use
When not to use
Basic example
The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.
Inline form actions
Changes are saved to the workspace after confirmation.
Sticky footer
Product setup
The action footer stays visually attached to long edit pages.
3 required fields remaining
import { Button, FormActions, StickyFormFooter } from '@byteion/react';
export default function FormActionsDemo() {
return (
<form className="w-full max-w-xl rounded-xl border border-border bg-card p-6">
<div className="space-y-2">
<h3 className="text-base font-semibold text-foreground">Workspace settings</h3>
<p className="text-sm text-muted-foreground">Form content sits above the action row.</p>
</div>
<FormActions>
<Button variant="ghost" tone="neutral">Cancel</Button>
<Button type="submit">Save changes</Button>
</FormActions>
<StickyFormFooter className="mt-6">
<Button variant="outline" tone="neutral">Discard</Button>
<Button type="submit">Publish</Button>
</StickyFormFooter>
</form>
);
}<script setup lang="ts">
import { Button, FormActions } from '@byteion/vue';
</script>
<template>
<form class="w-full max-w-xl rounded-xl border border-border bg-card p-6">
<div class="space-y-2">
<h3 class="text-base font-semibold text-foreground">Workspace settings</h3>
<p class="text-sm text-muted-foreground">Form content sits above the action row.</p>
</div>
<FormActions>
<Button variant="ghost" tone="neutral">Cancel</Button>
<Button type="submit">Save changes</Button>
</FormActions>
<FormActions sticky class="mt-6">
<Button variant="outline" tone="neutral">Discard</Button>
<Button type="submit">Publish</Button>
</FormActions>
</form>
</template>Variants
Each variant communicates a different meaning. Choose based on priority, not aesthetics.
Single default variant.
Sizes
Size should match the importance and context of the component.
- md — md size.
States
This component reacts seamlessly to the following interaction and data states:
- default — Resting appearance before interaction.
- active — Currently selected or in use.
Anatomy
Usage guidelines
- Follow the design system tokens.
- Maintain consistent spacing.
Do and Don't
Do
- Follow accessibility guidelines.
- Maintain visual hierarchy.
Don't
- Do not hardcode colors.
- Do not nest interactive elements.
Accessibility
This component follows standard ARIA patterns for its role. Keyboard interaction matches the native HTML element behavior.
Role:group
Keyboard Navigation
- Tab
Customization
Override visual appearance by modifying variables.css or Tailwind utility classes.
Compose with React cva()
Use the exportedcva() +cn() utilities to compose your own variant on top of the Byteion tokens.
import { cva, cn, type VariantProps } from '@byteion/react';
const myFormActions = cva('base classes…', {
variants: {
accent: { soft:'border-primary-200', loud:'border-primary-500' },
},
defaultVariants: { accent:'soft' },
});
type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myFormActions>;Compose with Vue cva()
Use the exportedcva() +cn() utilities inside standard Vue setup blocks.
<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';
interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();
const myFormActions = cva('base classes…', {
variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});
const cls = computed(() => myFormActions({ accent: props.accent, class: attrs.class as string | undefined }));
</script>Runtime events
Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.
HTML / JS events
No HTML runtime events are declared by this adapter.
React callbacks
No React callback events are declared by this adapter.
Vue emits
No Vue emitted events are declared by this adapter.
Remote / AJAX
This component does not implement Byteion JS remote loading. Use normal HTML form submission, framework state, or your application data layer around it.
API Reference
No custom data attributes required. Uses standard HTML attributes.
HTML Data Attributes
No custom data attributes required.
React Props · FormActionsProps
Extracted directly fromreact/src/components/FormActions.tsx.
export interface FormActionsProps extends HTMLAttributes<HTMLDivElement> {
sticky?: boolean;
}Developer tips
Common mistakes
Production usage tips
data-bi-* attributes instead of styling hooks.
Premium examples
Advanced patterns available in Byteion Pro:
Related components
Unlock Premium Patterns
Get access to copy-paste ready Pro blocks, SaaS templates, and advanced data-tables built with this component.
Explore Pro Components