Button

Use Button for an immediate action. It renders your content directly and adds a small press response without taking ownership of your action state or navigation.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

npx shadcn@latest add @sona-ui/button

Basic usage

save-button.tsx

import Button from "@/components/ui/button/button";
 
export function SaveButton() {
return <Button>Save changes</Button>;
}

Examples

Variants

Use the default variant for the primary action in a local context. Use outlined or secondary for supporting actions.

Icon content

Pass icons and text as children. Keep the visible label clear enough to describe the action.

Usage


export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <Button>
        Get started <ArrowRight className="size-4" />
      </Button>
    </div>
  );
}

API

Property	Type	Default	Description
`children`	`React.ReactNode`	`required`	Content rendered inside the button.
`variant`	`"default" \| "outlined" \| "secondary"`	`"default"`	Visual style of the button.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the button height, padding, and text size.

Accessibility

Use a button label that describes the resulting action. When an icon is the only visible content, add an accessible name with aria-label.

Styling

Use variant, size, and class name options to match the context. Reduced-motion preferences remove the press transform while preserving the interaction state.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI