Skip to main content

​
Overview

The AxButton component provides a set of predefined visual variants for buttons across the AxMed design system. It wraps Ant Design’s Button component with custom styling and a simplified variant API.

​
Import

import { AxButton } from "axmed-design-system"
import type { AxButtonProps } from "axmed-design-system"

​
Props

​
variant
AxButtonVariant
default:"primary"
Visual variant of the button. Available options:
  • "primary" - Primary action button with filled background
  • "secondary" - Secondary action button with outlined style
  • "ghost" - Transparent button with primary color border
  • "danger" - Destructive action button in red
  • "link" - Button styled as a text link
  • "text" - Button with no border or background
​
children
React.ReactNode
Button content (text, icons, or other elements)
​
disabled
boolean
default:"false"
Whether the button is disabled
​
loading
boolean
default:"false"
Show loading spinner and disable the button
​
icon
React.ReactNode
Icon element to display before button text
​
iconPosition
'start' | 'end'
default:"'start'"
Position of the icon relative to button text
​
block
boolean
default:"false"
Whether button should take full width of its container
​
htmlType
'button' | 'submit' | 'reset'
default:"'button'"
HTML button type attribute
​
onClick
(event: React.MouseEvent<HTMLElement>) => void
Click event handler
​
className
string
Additional CSS classes to apply
​
style
React.CSSProperties
Inline styles to apply

​
Type Definitions

type AxButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "link" | "text"

export type AxButtonProps = {
  /** Visual variant of the button */
  variant?: AxButtonVariant
} & Omit<AntButtonProps, "type" | "danger" | "ghost" | "variant">
The component extends Ant Design’s ButtonProps while omitting conflicting props (type, danger, ghost, variant) that are mapped through the variant prop.

​
Usage Examples

​
Basic Variants

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

function Example() {
  return (
    <>
      <AxButton variant="primary">Primary Action</AxButton>
      <AxButton variant="secondary">Secondary Action</AxButton>
      <AxButton variant="ghost">Ghost Button</AxButton>
      <AxButton variant="danger">Delete</AxButton>
      <AxButton variant="link">Link Button</AxButton>
      <AxButton variant="text">Text Button</AxButton>
    </>
  )
}

​
With Icons

import { AxButton } from "axmed-design-system"
import { PlusOutlined, DownloadOutlined } from "@ant-design/icons"

function Example() {
  return (
    <>
      <AxButton variant="primary" icon={<PlusOutlined />}>
        Add Item
      </AxButton>
      <AxButton 
        variant="secondary" 
        icon={<DownloadOutlined />}
        iconPosition="end"
      >
        Download
      </AxButton>
    </>
  )
}

​
Loading State

import { AxButton } from "axmed-design-system"
import { useState } from "react"

function Example() {
  const [loading, setLoading] = useState(false)

  const handleClick = async () => {
    setLoading(true)
    await performAction()
    setLoading(false)
  }

  return (
    <AxButton 
      variant="primary" 
      loading={loading}
      onClick={handleClick}
    >
      Submit
    </AxButton>
  )
}

​
Full Width

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

function Example() {
  return (
    <AxButton variant="primary" block>
      Full Width Button
    </AxButton>
  )
}

​
Disabled State

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

function Example() {
  return (
    <AxButton variant="primary" disabled>
      Disabled Button
    </AxButton>
  )
}

​
Related Components

  • AxActionMenu - For dropdown menus with actions
  • AxModal - Buttons are commonly used in modal footers
  • AxDrawer - Buttons are commonly used in drawer footers

Build docs developers (and LLMs) love

Get started for freeTalk to us