Control Components

Control components provide interactive elements for your Web3 application.

Button

The Button component is a versatile control that supports multiple states and actions.

import { Button } from '@avalabs/builderkit';

// Basic usage
<Button 
  label="Click me"
  action={() => console.log('Button clicked')}
/>

// With loading state
<Button 
  label="Processing..."
  action={() => {}}
  status="loading"
/>

// Disabled state
<Button 
  label="Unavailable"
  action={() => {}}
  status="disabled"
/>

Props

Prop	Type	Default	Description
`label`	`string`	-	Text to display on the button
`action`	`() => void`	-	Function to execute when button is clicked
`status`	`'idle' \| 'loading' \| 'disabled'`	`'idle'`	Current state of the button
`className`	`string`	-	Additional CSS classes

ConnectButton

The ConnectButton component provides wallet connection functionality.

import { ConnectButton } from '@avalabs/builderkit';

// Basic usage
<ConnectButton />

// With wallet display
<ConnectButton 
  showConnectedWallet={true}
  checkWrongNetwork={true}
/>

Props

Prop	Type	Default	Description
`showConnectedWallet`	`boolean`	`false`	Show connected wallet address
`checkWrongNetwork`	`boolean`	`false`	Enable network validation
`className`	`string`	-	Additional CSS classes

Control Components

Control Components

Button

Props

ConnectButton

Props

On this page