Button

Buttons allow users to perform actions with a single click or tap. They are the primary way users interact with your application.

Import

import { Button, Link } from '@proyecto-viviana/solid-spectrum';

Variants

Buttons come in four semantic variants to convey different levels of importance.

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="accent">Accent</Button>
<Button variant="negative">Negative</Button>

Styles

Each variant can be rendered in fill (default) or outline style.

<Button variant="primary" fillStyle="fill">Fill</Button>
<Button variant="primary" fillStyle="outline">Outline</Button>

Disabled State

Disabled buttons cannot be interacted with and appear visually muted.

<Button isDisabled>Disabled</Button>

Press Events

Use onPress for click handling. It normalizes mouse, touch, and keyboard interactions.

<Button onPress={() => setCount(c => c + 1)}>
  Clicked {count()} times
</Button>

Navigation

Use Link for navigation semantics and Button for actions.

View on GitHub

<Link href="https://github.com/proyecto-viviana" target="_blank" rel="noopener noreferrer">
  View on GitHub
</Link>

Props

Prop	Type	Default	Description
`variant`	'primary' \| 'secondary' \| 'accent' \| 'negative' \| 'premium' \| 'genai'	`'primary'`	Visual style variant
`fillStyle`	'fill' \| 'outline'	`'fill'`	Background fill style
`isDisabled`	boolean	`false`	Whether the button is disabled
`onPress`	(e: PressEvent) => void	—	Handler called when the button is pressed
`onPressStart`	(e: PressEvent) => void	—	Handler called when press starts
`onPressEnd`	(e: PressEvent) => void	—	Handler called when press ends
`type`	'button' \| 'submit' \| 'reset'	`'button'`	Button type for forms
`isPending`	boolean	`false`	Whether the button is in a pending/loading state
`children`	JSX.Element	—	Button content
`class`	string	—	Additional CSS classes

Accessibility

Uses native <button> element for proper semantics
Supports keyboard activation via Enter and Space keys
Focus ring visible only on keyboard navigation (not mouse clicks)
Disabled state communicated via native disabled semantics
Press events normalize mouse, touch, and keyboard interactions