Button

Button renders the Gaudi action and link-button variants.

CoreBasics@gaudi/design-system/core/ButtonView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Button from '@gaudi/design-system/core/Button';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/button-async-success.json.

import { Button } from '@gaudi/design-system';
<Button variant='solid' tone='accent' size='md'>Read article</Button>

Props

children

variantdefault solid

sizedefault md

tone

radiusdefault md

disabled

Button.jsx

import Button from '@gaudi/design-system/core/Button';
<Button>Button</Button>

8 props

Button renders native buttons for actions and links for navigation. Disabled link variants are removed from tab order.