Skip to main content

Button

Buttons are used to trigger actions such as submitting forms, opening dialogs, or performing primary user interactions.

Usage​

Basic usage​

import { Button } from '@nofinite/nui';

<Button>Default Button</Button>;

With events​

<Button onClick={() => console.log('Clicked')}>Click me</Button>

Variants​

Use variants to indicate the importance of an action.

<Button>Default Button</Button>
<Button variant="primary">Primary Button</Button>

Available variants:

  • default – subtle background, neutral emphasis
  • primary – strong emphasis (uses the theme primary color)

Guidelines:

  • Use primary for the main action in a view or dialog.
  • Prefer default for secondary or less critical actions.

Sizes​

Buttons support multiple sizes for different layouts.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Available sizes:

  • sm
  • md (default)
  • lg

You can also mix variants and sizes:

<Button variant="primary" size="lg">
  Large Primary
</Button>

Disabled State​

Use the disabled state to prevent user interaction.

<Button disabled>Disabled</Button>
<Button variant="primary" disabled>
  Disabled Primary
</Button>

Disabled buttons:

  • Cannot be clicked.
  • Are not focusable via keyboard.
  • Have reduced opacity and a not-allowed cursor.

Native Props​

The Button component extends the native <button> element, so you can pass any standard button attribute:

<Button
  type="button"
  name="myButton"
  value="some-value"
  onClick={handleClick}
  aria-label="Close dialog"
  data-testid="close-btn"
>
  Close
</Button>

You can also pass a className to apply additional custom styles:

<Button className="my-custom-button">Custom Styled Button</Button>

Props​

PropTypeDefaultDescription
variant"default" | "primary"defaultVisual style of the button
size"sm" | "md" | "lg"mdSize of the button
disabledbooleanfalseDisables the button
childrenReact.ReactNode—Button content
classNamestring""Additional class names for custom styling
...restReact.ButtonHTMLAttributes<HTMLButtonElement>—Any other native button attributes

Button Type Behavior​

Button does not override the native type behavior. By HTML default, a <button> without a type inside a <form> acts as a submit button.

// Inside a form, this will submit the form
<Button>Submit</Button>

// Explicit submit
<Button type="submit">Submit</Button>

// Non-submitting button inside a form
<Button type="button">Cancel</Button>

Accessibility​

  • Renders a native <button> element.
  • Supports keyboard navigation (Tab to focus, Space or Enter to activate).
  • Disabled buttons are not focusable and cannot be activated.
  • All aria-* attributes are forwarded to the underlying button element.

For icon-only buttons, provide an accessible label:

<Button aria-label="Close dialog">✕</Button>

Layout​

By default, Button:

  • Sizes to its content.
  • Behaves like a standard inline button element.

To make a button fill its container width, use inline styles or a custom class:

<Button style={{ width: '100%' }}>Full-width Button</Button>

Best Practices​

Do​

  • Use primary for the main action.
  • Use clear, action-oriented labels (for example, “Save changes”, “Continue”).
  • Use type="button" for non-submitting buttons inside forms.
  • Provide aria-label for icon-only buttons.

Don’t​

  • Use multiple primary buttons in the same view.
  • Disable buttons without explanation (for example, show helper text nearby).
  • Rely on color alone to convey meaning—make labels descriptive.