Button

Versatile button component with DaisyUI styling and many variants.

Import

import { Button } from 'asterui'

Examples

Brand Colors

Primary brand colors for common actions.

</>

PrimarySecondaryAccentNeutral

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Primary</Button>
        <Button color="secondary">Secondary</Button>
        <Button color="accent">Accent</Button>
        <Button color="neutral">Neutral</Button>
      </Space>
    )
}

export default App

State Colors

Semantic colors for different states and feedback.

</>

InfoSuccessWarningError

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="info">Info</Button>
        <Button color="success">Success</Button>
        <Button color="warning">Warning</Button>
        <Button color="error">Error</Button>
      </Space>
    )
}

export default App

Variants

Different style variants: solid (default), outline, dash, soft, ghost, and link.

</>

SolidOutlineDashSoftGhostLink

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Solid</Button>
        <Button color="primary" variant="outline">Outline</Button>
        <Button color="primary" variant="dash">Dash</Button>
        <Button color="primary" variant="soft">Soft</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
      </Space>
    )
}

export default App

Sizes

Five sizes: xs, sm, md (default), lg, and xl.

</>

XSSmallMediumLargeXL

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button size="xs">XS</Button>
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">Large</Button>
        <Button size="xl">XL</Button>
      </Space>
    )
}

export default App

Outline

Outline variant with transparent background.

</>

PrimarySecondaryAccentSuccessError

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="outline">Primary</Button>
        <Button color="secondary" variant="outline">Secondary</Button>
        <Button color="accent" variant="outline">Accent</Button>
        <Button color="success" variant="outline">Success</Button>
        <Button color="error" variant="outline">Error</Button>
      </Space>
    )
}

export default App

Dashed Border

Buttons with dashed border styling.

</>

PrimarySecondaryAccent

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="dash">Primary</Button>
        <Button color="secondary" variant="dash">Secondary</Button>
        <Button color="accent" variant="dash">Accent</Button>
      </Space>
    )
}

export default App

Soft Colors

Muted color backgrounds for subtle emphasis.

</>

PrimarySecondaryAccentSuccessWarning

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" variant="soft">Primary</Button>
        <Button color="secondary" variant="soft">Secondary</Button>
        <Button color="accent" variant="soft">Accent</Button>
        <Button color="success" variant="soft">Success</Button>
        <Button color="warning" variant="soft">Warning</Button>
      </Space>
    )
}

export default App

States

Active, loading, and disabled states.

</>

NormalActiveLoadingDisabled

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">Normal</Button>
        <Button color="primary" active>Active</Button>
        <Button color="primary" loading>Loading</Button>
        <Button color="primary" disabled>Disabled</Button>
      </Space>
    )
}

export default App

Shapes

Square and circle shapes for icon buttons.

</>

import { Button, Space } from 'asterui'
import { XMarkIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button color="primary" shape="square">
          <XMarkIcon />
        </Button>
        <Button color="primary" shape="circle">
          <XMarkIcon />
        </Button>
      </Space>
    )
}

export default App

Wide

Extra wide buttons for emphasis.

</>

Wide ButtonAnother Wide

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Button color="primary" shape="wide">Wide Button</Button>
        <Button color="secondary" shape="wide">Another Wide</Button>
      </Space>
    )
}

export default App

Block

Full width buttons.

</>

Block ButtonAnother Block

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" className="w-full">
        <Button color="primary" shape="block">Block Button</Button>
        <Button color="secondary" shape="block">Another Block</Button>
      </Space>
    )
}

export default App

Loading States

Loading spinner with different colors.

</>

LoadingProcessingDeleting

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" loading>Loading</Button>
        <Button color="success" loading>Processing</Button>
        <Button color="error" loading>Deleting</Button>
      </Space>
    )
}

export default App

Link Buttons

Buttons that navigate to URLs. Renders as anchor element when href is provided.

</>

GitHubnpmInternal Link

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" href="https://github.com" target="_blank">GitHub</Button>
        <Button variant="ghost" href="https://npmjs.com" target="_blank">npm</Button>
        <Button href="/components" variant="link">Internal Link</Button>
      </Space>
    )
}

export default App

With Icons

Buttons with icons using the icon prop for automatic spacing.

</>

UploadSaveDelete

import { Button, Space } from 'asterui'
import { ArrowUpTrayIcon, CheckIcon, TrashIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" icon={<ArrowUpTrayIcon />}>
          Upload
        </Button>
        <Button color="success" icon={<CheckIcon />}>
          Save
        </Button>
        <Button color="error" icon={<TrashIcon />} iconPosition="end">
          Delete
        </Button>
      </Space>
    )
}

export default App

Auto-sized Icons

Icons from @aster-ui/icons automatically match the button size.

</>

XSSmallMediumLargeXL

import { Button, Space } from 'asterui'
import { ArrowUpTrayIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm" align="center">
        <Button size="xs" color="primary" icon={<ArrowUpTrayIcon />}>XS</Button>
        <Button size="sm" color="primary" icon={<ArrowUpTrayIcon />}>Small</Button>
        <Button size="md" color="primary" icon={<ArrowUpTrayIcon />}>Medium</Button>
        <Button size="lg" color="primary" icon={<ArrowUpTrayIcon />}>Large</Button>
        <Button size="xl" color="primary" icon={<ArrowUpTrayIcon />}>XL</Button>
      </Space>
    )
}

export default App

Danger Button

Semantic danger styling for destructive actions.

</>

DeleteRemove ItemCancel Account

import { Button, Space } from 'asterui'
import { TrashIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button danger>Delete</Button>
        <Button danger icon={<TrashIcon />}>
          Remove Item
        </Button>
        <Button danger variant="outline">Cancel Account</Button>
      </Space>
    )
}

export default App

Round Shape

Pill-shaped buttons with fully rounded ends.

</>

Get StartedLearn MoreSubscribe

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" shape="round">Get Started</Button>
        <Button color="secondary" shape="round">Learn More</Button>
        <Button color="accent" shape="round">Subscribe</Button>
      </Space>
    )
}

export default App

Toggle Button

Toggle buttons using pressed prop for accessibility.

</>

OffToggle: Inactive

import { Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [pressed, setPressed] = useState(false)
  
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button
          color="primary"
          pressed={pressed}
          active={pressed}
          onClick={() => setPressed(!pressed)}
        >
          {pressed ? 'On' : 'Off'}
        </Button>
        <Button
          color="secondary"
          variant="outline"
          pressed={pressed}
          active={pressed}
          onClick={() => setPressed(!pressed)}
        >
          Toggle: {pressed ? 'Active' : 'Inactive'}
        </Button>
      </Space>
    )
}

export default App

No Animation

Disable the click animation effect.

</>

With AnimationNo Animation

import { Button, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary">With Animation</Button>
        <Button color="primary" noAnimation>No Animation</Button>
      </Space>
    )
}

export default App

Form Submit

Button with htmlType='submit' inside AsterUI Form component.

</>

Email*

 

SubmitReset

import { Button, Space, Input, Form, notification } from 'asterui'

function App() {
  const handleFinish = (values: { email: string }) => {
    notification.success({ message: 'Submitted!', description: `Email: ${values.email}` })
  }
  
  return (
      <Form onFinish={handleFinish}>
        <Form.Item name="email" label="Email" required>
          <Input type="email" placeholder="you@example.com" />
        </Form.Item>
        <Form.Item>
          <Space direction="horizontal" size="sm">
            <Button color="primary" htmlType="submit">Submit</Button>
            <Button htmlType="reset">Reset</Button>
          </Space>
        </Form.Item>
      </Form>
    )
}

export default App

Event Handling

Buttons with onClick handlers and state management.

</>

Clicked 0 timesAsync Action

import { Button, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const [loading, setLoading] = useState(false)
  
  const handleAsync = async () => {
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setLoading(false)
  }
  
  return (
      <Space direction="horizontal" wrap size="sm">
        <Button color="primary" onClick={() => setCount(c => c + 1)}>
          Clicked {count} times
        </Button>
        <Button color="secondary" onClick={handleAsync} loading={loading}>
          {loading ? 'Processing...' : 'Async Action'}
        </Button>
      </Space>
    )
}

export default App

API

Button

Property	Description	Type	Default
type	Syntactic sugar for setting variant and color together. Overridden by explicit variant & color props	'primary' | 'default' | 'dashed' | 'link' | 'text'	-
color	Button color	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'	-
variant	Button style variant	'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link' | 'text'	-
size	Button size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
active	Active/pressed visual state	boolean	false
loading	Show loading spinner and disable button	boolean	false
shape	Button shape	'square' | 'circle' | 'wide' | 'block' | 'round'	-
block	Make the button full width	boolean	false
ghost	Make background transparent and invert text and border colors	boolean	false
icon	Icon element to display	ReactNode	-
iconPlacement	Position of the icon	'start' | 'end'	'start'
danger	Applies error/danger styling (shorthand for color=“error”)	boolean	false
pressed	Toggle button pressed state (sets aria-pressed)	boolean	-
noAnimation	Disable click animation	boolean	false
disabled	Disabled state	boolean	false
aria-label	Accessible label for icon-only buttons	string	-
href	URL to navigate to (renders as anchor element)	string	-
target	Where to open the linked URL (when href is set)	string	-
htmlType	HTML button type (only when href is not set)	'button' | 'submit' | 'reset'	'button'
className	Additional CSS classes	string	-
children	Button content	ReactNode	-
data-testid	Test ID for testing	string	-

Data Attributes

The Button component exposes the following data attributes for testing and state inspection:

• data-state-loading: Present when button is in loading state
• data-state-disabled: Present when button is disabled
• data-state-active: Present when button is in active state
• data-state-pressed: Present when button is in pressed state (toggle buttons)

Accessibility

• Uses native <button> element for proper keyboard support
• Renders as <a> element when href is provided for proper link semantics
• Loading state sets aria-busy="true" and disables the button
• Toggle buttons use aria-pressed for screen reader support
• Icon-only buttons should use aria-label for screen reader support
• Disabled state is properly communicated to assistive technologies
• Focus states are visible for keyboard navigation