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

<HStack gap={12} wrap>
  <Button>Deploy</Button>
  <Button variant="secondary">Preview</Button>
  <Button variant="ghost">Cancel</Button>
  <Button variant="danger">Delete</Button>
  <Button disabled>Disabled</Button>
</HStack>

#Import

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

#Patterns

<Button>Medium (default)</Button>
<Button radius="full">Pill</Button>
<Button radius="full" variant="secondary">Pill secondary</Button>

<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.
• radius: md (default, current shape) or full (the earlier pill shape). Available for every variant and size in React and SolidJS.
• 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.