Skip to main content
PROYECTOVIVIANA

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 } from '@proyecto-viviana/ui';

Fill

Buttons render with fill by default. Primary and accent are the primary action variants.

<Button variant="primary">Primary</Button>
<Button variant="accent">Accent</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>

Props

PropTypeDefaultDescription
variant'primary' | 'secondary' | 'accent' | 'negative' | 'warning' | 'success' | 'create''primary'Visual style variant
fillStyle'fill' | 'outline''fill'Background fill style
isDisabledbooleanfalseWhether the button is disabled
onPress(e: PressEvent) => void—Handler called when the button is pressed
type'button' | 'submit' | 'reset''button'Button type for forms
isPendingbooleanfalseWhether the button is in a pending/loading state
childrenJSX.Element—Button content

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