Skip to main content
Buttons allow users to trigger actions and make choices with a single click. The AxButton component provides six semantic variants and supports icons, loading states, and multiple sizes.

​
Basic Usage

import { AxButton } from 'axmed-design-system'

function Example() {
  return (
    <AxButton variant="primary" onClick={() => console.log('Clicked')}>
      Submit Order
    </AxButton>
  )
}

​
Variants

Buttons come in six semantic variants to communicate different action priorities.
The button renders with different visual styles based on the variant prop:
  • primary - Main call-to-action (solid purple background)
  • secondary - Secondary actions (outlined)
  • ghost - Subtle actions (transparent with border on hover)
  • danger - Destructive actions (solid red background)
  • link - Navigation-style (text only, no border)
  • text - Minimal actions (text only, subtle hover)

​
Sizes

Three size options for different contexts. 
<AxButton size="small">Small</AxButton>
<AxButton size="middle">Middle</AxButton>  {/* default */}
<AxButton size="large">Large</AxButton>

​
With Icons

Buttons can display icons before or after the label text. 
import { SearchOutlined, DownloadOutlined, PlusOutlined } from '@ant-design/icons'

<AxButton icon={<SearchOutlined />}>Search</AxButton>
<AxButton icon={<DownloadOutlined />} iconPlacement="end">Download</AxButton>
<AxButton icon={<PlusOutlined />} shape="circle" />  {/* Icon only */}

​
States

​
Loading

Show a spinner during async operations: 
const [loading, setLoading] = useState(false)

const handleSubmit = async () => {
  setLoading(true)
  await submitOrder()
  setLoading(false)
}

<AxButton loading={loading} onClick={handleSubmit}>
  Submit Order
</AxButton>

​
Disabled

<AxButton disabled>Not Available</AxButton>

​
Full Width

Make the button span the full width of its container: 
<AxButton block>Full Width Button</AxButton>

​
Common Patterns

​
Form Actions

<div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
  <AxButton variant="secondary" onClick={onCancel}>Cancel</AxButton>
  <AxButton variant="primary" onClick={onSubmit}>Submit</AxButton>
</div>

​
Danger Confirmation

<AxButton variant="danger" onClick={handleDelete}>
  Delete Order
</AxButton>

​
Icon-Only Actions

import { EditOutlined, DeleteOutlined } from '@ant-design/icons'

<div style={{ display: 'flex', gap: 8 }}>
  <AxButton variant="text" size="small" icon={<EditOutlined />} />
  <AxButton variant="text" size="small" icon={<DeleteOutlined />} />
</div>

​
Props

​
variant
string
default:"primary"
Visual variant: primary, secondary, ghost, danger, link, or text
​
size
string
default:"middle"
Button size: small, middle, or large
​
loading
boolean
default:"false"
Show loading spinner
​
disabled
boolean
default:"false"
Disable the button
​
block
boolean
default:"false"
Make button full width
​
icon
ReactNode
Icon to display before the button text
​
iconPlacement
string
default:"start"
Icon position: start or end
​
shape
string
Button shape: default, circle, or round
​
onClick
function
Click event handler
See the full API reference for all available props.

Build docs developers (and LLMs) love

Get started for freeTalk to us