Aedis UI

Button

The base action. Defaults to type="button", so it never submits a form by accident.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add button# pnpm dlx @aedis/cli@0.1.0 add button · yarn dlx @aedis/cli@0.1.0 add button · bunx @aedis/cli@0.1.0 add button

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"Visual style.
size"default" | "sm" | "lg" | "icon""default"Height and padding.
renderReactElement | (props, state) => ReactElement—Render another element (e.g. a link) with the button styles. It keeps its own role, so a link stays a link.

Security

  • Defaults to type="button": submitting a form must be explicit (type="submit").