按钮 Button

import { Button } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Button size="ty">小小</Button>
      <Button size="sm">小</Button>
      <Button>正常</Button>
      <Button size="lg">大</Button>
      <Button size="xl">大大</Button>
    </>
  )
}

import { Button } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Button>Default</Button>
      <Button type="primary">Primary</Button>
      <Button type="secondary">Secondary</Button>
      <Button type="ghost">Ghost</Button>
    </>
  )
}

import { Button } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Button>不圆</Button>
      <Button rounded>圆润</Button>
      <Button square>方</Button>
      <Button square rounded>
        原
      </Button>
    </>
  )
}

import { Button } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Button type="primary" disabled>
        Primary
      </Button>
      <Button type="secondary" disabled>
        Secondary
      </Button>
    </>
  )
}

import { Button } from "mmixel-ui"
import { useState } from "react"
 
const LoadButton = () => {
  const [loading, setLoading] = useState<boolean>(false)
  const showLoad = () => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 1000)
  }
  return (
    <Button loading={loading} onClick={showLoad} icon={<HomeIcon />}>
      这是什么，点一下
    </Button>
  )
}
 
export default LoadButton

import { Button } from "mmixel-ui"
 
export default function App() {
  return (
    <>
      <Button
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16">
            <path
              fill="currentColor"
              d="M6.906.664a1.749 1.749 0 0 1 2.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0 1 13.25 15h-3.5a.75.75 0 0 1-.75-.75V9H7v5.25a.75.75 0 0 1-.75.75h-3.5A1.75 1.75 0 0 1 1 13.25V6.23c0-.531.242-1.034.657-1.366l5.25-4.2Zm1.25 1.171a.25.25 0 0 0-.312 0l-5.25 4.2a.25.25 0 0 0-.094.196v7.019c0 .138.112.25.25.25H5.5V8.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v5.25h2.75a.25.25 0 0 0 .25-.25V6.23a.25.25 0 0 0-.094-.195Z"
            />
          </svg>
        }>
        苹果
      </Button>
      <Button
        icon={
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 16 16">
            <path
              fill="currentColor"
              d="M6.906.664a1.749 1.749 0 0 1 2.187 0l5.25 4.2c.415.332.657.835.657 1.367v7.019A1.75 1.75 0 0 1 13.25 15h-3.5a.75.75 0 0 1-.75-.75V9H7v5.25a.75.75 0 0 1-.75.75h-3.5A1.75 1.75 0 0 1 1 13.25V6.23c0-.531.242-1.034.657-1.366l5.25-4.2Zm1.25 1.171a.25.25 0 0 0-.312 0l-5.25 4.2a.25.25 0 0 0-.094.196v7.019c0 .138.112.25.25.25H5.5V8.25a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 .75.75v5.25h2.75a.25.25 0 0 0 .25-.25V6.23a.25.25 0 0 0-.094-.195Z"
            />
          </svg>
        }></Button>
    </>
  )
}

import { Button } from "mmixel-ui"
 
export default function App() {
  return (
    <Button.Group>
      <Button>富强</Button>
      <Button type="primary">民主</Button>
      <Button type="secondary">文明</Button>
      <Button>和谐</Button>
    </Button.Group>
 
    <Button.Group direction="ver" rounded>
      <Button>富强</Button>
      <Button type="primary">民主</Button>
      <Button type="secondary">文明</Button>
      <Button>和谐</Button>
    </Button.Group>
  )
}