components / button
Button
All the native <button> props, plus variant, color, size, radius, hover and ready-made animations.
How to use
Import from `vaiperui` and use it like a `<button>`: every native prop (`onClick`, `disabled`, `type`, `aria-*`…) keeps working. The look is controlled by the `variant`, `variantColor`, `size`, `radius`, `hover` and `animation` props.
preview
Button.tsx
import { Button } from "vaiperui"; <Button variantColor="primary" hover="lift"> Click here</Button><Button variant="outlined2" variantColor="danger"> Delete</Button>Colors
preview
colors.tsx
<Button variantColor="primary">Button</Button><Button variantColor="success">Button</Button><Button variantColor="warning">Button</Button><Button variantColor="danger">Button</Button>Styles
Same color (`primary`) on all of them: what changes is the fill and the outline.
preview
styles.tsx
<Button variant="solid" variantColor="primary">Button</Button><Button variant="solid-inverse" variantColor="primary">Button</Button><Button variant="outlined" variantColor="primary">Button</Button><Button variant="outlined2" variantColor="primary">Button</Button><Button variant="transparent" variantColor="primary">Button</Button>Sizes
preview
sizes.tsx
<Button size="sm">Button</Button><Button size="md">Button</Button><Button size="lg">Button</Button>Radius
preview
radius.tsx
<Button radius="none">Button</Button><Button radius="sm">Button</Button><Button radius="md">Button</Button><Button radius="lg">Button</Button><Button radius="full">Button</Button>Hover
`glow` uses the variant color for the glow. Hover to see it.
preview
hover.tsx
<Button hover="none">Button</Button><Button hover="lift">Button</Button><Button hover="scale">Button</Button><Button hover="glow" variantColor="primary">Button</Button>Animations
They respect `prefers-reduced-motion`.
preview
animations.tsx
<Button animation="float">Float</Button><Button animation="pulse">Pulse</Button><Button animation="shine">Shine</Button><Button animation="jelly">Jelly</Button><Button animation="jump">Jump</Button><Button animation="gradient">Gradient</Button>Custom color
`customColor` overrides `variantColor` with a single color, or a `{ light, dark }` object with one color per theme.
preview
custom-color.tsx
<Button customColor="#ff6600">Orange</Button><Button customColor="#a78bfa" variant="outlined">Violet</Button><Button customColor={{ light: "#a855f7", dark: "#f472b6" }}>Light/dark</Button>Ripple
`ripple` creates a wave from the click point. It uses the button's text color.
preview
ripple.tsx
<Button ripple>Solid</Button><Button ripple variant="outlined">Outlined</Button><Button ripple variant="transparent" variantColor="success">Transparent</Button>Props
| Prop | Values | Default | Description |
|---|---|---|---|
| variant | solid | solid-inverse | outlined | outlined2 | transparent | solid | solid: filled background. solid-inverse: filled background with a lighter hover. outlined: soft border and tinted hover. outlined2: strong border and filling hover. transparent: no background/border |
| variantColor | primary | success | warning | danger | primary | Semantic color of the button |
| size | sm | md | lg | md | Height, padding and font size |
| radius | none | sm | md | lg | full | md | Border rounding |
| hover | none | lift | scale | glow | none | Extra effect on mouse hover. glow uses the variant color |
| animation | none | float | pulse | shine | wiggle | wobble | nudge | jelly | heartbeat | jump | gradient | glow | none | Continuous button animation; respects prefers-reduced-motion |
| customColor | string | { light: string; dark: string } | — | Overrides variantColor with any CSS color (or a light/dark pair); hover, border and focus derive from it |
| ripple | boolean | false | Ripple effect from the click point; also triggers from the keyboard. Respects prefers-reduced-motion |
| iconStart / iconEnd | ReactNode | — | Icon/content before or after the text |
| (native) | ButtonHTMLAttributes<HTMLButtonElement> | — | onClick, disabled, type, aria-*, className (overrides styles), etc. |