AtomsButton

Button

Triggers an action. The most common atom in any product surface. get this one right and most of the rest follows.

Status: stable · @velon-finance/ui

Overview

Variants

Six variants cover the visual hierarchy of actions on any screen. Use at most one primary per surface.

Sizes

With icon

States

Props

PropTypeDefaultDescription
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive''primary'Visual style
size'sm' | 'md' | 'lg' | 'icon''md'Sizing scale
asChildbooleanfalseRender as the child element instead of a <button> (Radix Slot)
disabledbooleanfalseDisables interaction and lowers opacity
…restButtonHTMLAttributes.All native button props (onClick, type, aria-*, etc.)

Accessibility

  • Always render a <button> (default) unless you genuinely need a link. use asChild with <a> for navigation actions.
  • For icon-only buttons, set aria-label describing the action.
  • Disabled buttons don’t receive focus. If you need a “disabled-looking” button that still focuses (to show a tooltip), use aria-disabled instead of the disabled prop.
  • Focus ring meets WCAG AA contrast in both light and dark themes.

Do / Don’t

Do

One primary action per surface, paired with a quieter cancel.

Don’t

Two primaries compete for attention. The user has to read both.

Code

import { Button } from '@velon-finance/ui'
 
<Button variant="primary" onClick={handleSubmit}>
  Confirmar
</Button>
IconsInput