Button

Button Component

The Button component provides a foundational button element with support for various styles, states, and behaviors.

Example

Preview Code

Copy

Primary ButtonSecondary ButtonEmphasised Button

Disabled Button

<div style="display:flex;gap:12px;flex-wrap:wrap"><button class="interactive btn skin-primary" type="button">Primary Button</button><button class="interactive btn skin-secondary" type="button">Secondary Button</button><button class="interactive btn skin-primary-emphasised" type="button">Emphasised Button</button><button class="interactive btn skin-secondary" type="button" disabled=""><p>Disabled Button</p></button></div>

<div style="display:flex;gap:12px;flex-wrap:wrap"><button class="interactive btn skin-primary" type="button">Primary Button</button><button class="interactive btn skin-secondary" type="button">Secondary Button</button><button class="interactive btn skin-primary-emphasised" type="button">Emphasised Button</button><button class="interactive btn skin-secondary" type="button" disabled=""><p>Disabled Button</p></button></div>

Usage

import Button from "@altitude/ui/react/ui/button";

export default function ButtonExample() {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <div>
      <Button className="skin-primary" onClick={handleClick}>
        Click Me
      </Button>

      <Button className="skin-secondary" type="submit">
        Submit Form
      </Button>

      <Button className="skin-primary-emphasised" disabled={isLoading}>
        {isLoading ? "Loading..." : "Save Changes"}
      </Button>
    </div>
  );
}

Props

Prop	Type	Required	Description
children	ReactNode	Yes	Content to be displayed inside the button
className	string	No	CSS class names to apply custom styling
type	string	No	HTML button type (“button”, “submit”, “reset”). Default: “button”
disabled	boolean	No	Whether the button is disabled. Default: false
onClick	function	No	Event handler for button click

All other standard HTML button attributes are also supported and passed through to the underlying button element.

Skin Classes

The Button component accepts various skin classes to change its appearance:

• skin-primary: Standard primary button style
• skin-secondary: Less prominent button style
• skin-primary-emphasised: Emphasized primary button for important actions
• interactive: Applied by default for proper hover/active states

Accessibility

The Button component follows accessibility best practices:

• Uses native HTML button element
• Preserves proper focus states
• Handles disabled states correctly
• Supports keyboard navigation