زر

import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>Save</Button>
      <Button variant="soft">Draft</Button>
      <Button variant="outline">Cancel</Button>
      <Button variant="ghost">Skip</Button>
      <Button variant="link">Learn more</Button>
    </div>
  )
}

import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-3">
        <Button tone="primary">Primary</Button>
        <Button tone="neutral">Neutral</Button>
        <Button tone="success">Success</Button>
        <Button tone="warning">Warning</Button>
        <Button tone="danger">Danger</Button>
        <Button tone="info">Info</Button>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button variant="soft" tone="primary">Primary</Button>
        <Button variant="soft" tone="neutral">Neutral</Button>
        <Button variant="soft" tone="success">Success</Button>
        <Button variant="soft" tone="warning">Warning</Button>
        <Button variant="soft" tone="danger">Danger</Button>
        <Button variant="soft" tone="info">Info</Button>
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <Button variant="outline" tone="primary">Primary</Button>
        <Button variant="outline" tone="success">Success</Button>
        <Button variant="outline" tone="danger">Danger</Button>
        <Button variant="ghost" tone="warning">Warning</Button>
        <Button variant="ghost" tone="info">Info</Button>
        <Button variant="link" tone="neutral">Neutral</Button>
      </div>
    </div>
  )
}

import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra large</Button>
    </div>
  )
}

import { arrowRight } from 'topclassui/icons/arrow-right'
import { check } from 'topclassui/icons/check'
import { Svg } from 'topclassui/svg'
import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <Svg icon={check} />
        Approve
      </Button>
      <Button variant="outline">
        Next
        <Svg icon={arrowRight} />
      </Button>
    </div>
  )
}

import { Button } from 'topclassui/button'

/** The render prop makes a real anchor that looks like a button and still costs 0 KB. */
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button render={<a href="/docs" />}>Read the docs</Button>
      <Button render={<a href="/docs" />} variant="outline">Outlined link</Button>
    </div>
  )
}

import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex max-w-sm flex-col gap-3">
      <Button fullWidth>Continue</Button>
      <Button variant="outline" fullWidth>Back</Button>
    </div>
  )
}

import { check } from 'topclassui/icons/check'
import { Svg } from 'topclassui/svg'
import { Button } from 'topclassui/button'

const LONG = 'Save this document and continue to the next step of the wizard'

export default function Demo() {
  return (
    <div className="flex flex-col gap-3">
      <div className="w-50 rounded-box border border-line p-2" data-narrow>
        <Button>{LONG}</Button>
      </div>
      <div className="w-50 rounded-box border border-line p-2" data-narrow>
        <Button variant="outline" tone="danger">
          <Svg icon={check} />
          {LONG}
        </Button>
      </div>
      <div className="w-50 rounded-box border border-line p-2" data-narrow>
        <Button fullWidth size="sm">{LONG}</Button>
      </div>
    </div>
  )
}

import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="md">The scale</Button>
      <Button size="custom" className="h-control-xl px-pad-x-sm text-xs">Your own row</Button>
    </div>
  )
}

import { ButtonSkeleton } from 'topclassui/button'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <ButtonSkeleton size="sm" />
      <ButtonSkeleton />
      <ButtonSkeleton size="lg" />
    </div>
  )
}

import { arrowRight } from 'topclassui/icons/arrow-right'
import { Svg } from 'topclassui/svg'
import { Button } from 'topclassui/button'

export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-wrap items-center gap-3">
      <Button>احفظ</Button>
      <Button variant="soft" tone="danger">احذف</Button>
      <Button variant="outline">
        التالي
        <Svg icon={arrowRight} />
      </Button>
    </div>
  )
}