Button

Button defines how EnterUI handles trigger actions with refined default, secondary, ghost, and danger styles, including default structure, accessible states, and token-driven styling.

#Default usage

<div className="docs-preview-row">
  <Button>Deploy</Button>
  <Button variant="secondary">Preview</Button>
  <Button variant="ghost">Cancel</Button>
  <Button variant="danger">Delete</Button>
  <Button disabled>Disabled</Button>
</div>

#Import

import { Button } from "@froggdesign/enter-ui-react";

#Patterns

<Button loading>Saving</Button>
<Button loading variant="secondary">Saving</Button>
<Button loading variant="danger">Deleting</Button>

#Accessibility

Button renders a native button, defaults to type="button", supports disabled state, and keeps focus-visible styling available through the theme ring. When loading is set, the button announces aria-busy="true", stays disabled, and exposes data-loading="true" so consumers can hook custom states.

#API

• variant: primary, secondary, ghost, or danger.
• size: sm, md, or lg.
• loading: when true, disables the button, shows a centered spinner, sets aria-busy="true", and sets data-loading="true".
• Includes native button props such as disabled, aria-label, and type.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.