Button

Preview

Usage

import { Home } from 'lucide-react'
import { Button } from '@vitnode/core/components/ui/button'

<Button>
  <Home />
  Default
</Button>

Variants

Pick the variant by the weight of the action, not by the colour you feel like:

• default - the one primary action on the screen.
• secondary / outline / ghost - supporting actions, in descending loudness.
• link - an action that behaves like navigation.
• success - confirms or completes something (approve, publish, mark as done).
• warning - a risky but reversible action the user should slow down for (unpublish, revoke a session).
• destructive - it deletes data and it isn't coming back.

success, warning and destructive share the same tinted shape - a soft coloured surface with matching text - so only the hue tells you how nervous to be. Colour alone never carries the meaning, so keep the label honest: a green button still needs to say "Approve".

<Button variant="success">
  <CircleCheckIcon />
  Approve
</Button>

<Button variant="warning">
  <TriangleAlertIcon />
  Unpublish
</Button>

Link

Use the render prop to swap the underlying element or compose the button with another component, such as a link. Set nativeButton={false} when the rendered element is not a native <button>.

import Link from 'next/link'

;<Button nativeButton={false} render={<Link href="/home" />}>
  Home
</Button>

Loading

Pass isLoading to render a spinner and disable the button while an action is in progress.

<Button isLoading>Save changes</Button>

Props

API Reference

Base UI - Button