Button

import { Button, ButtonIcon, ButtonTitle } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.a href="#examples" variant="primary">
        <ButtonTitle>Get started</ButtonTitle>
        <ButtonIcon />
      </Button.a>
      <Button.a href="#variants-and-tags" variant="secondary">
        <ButtonTitle>See variants</ButtonTitle>
      </Button.a>
    </div>
  )
}

import { Button } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.button variant="primary">Primary</Button.button>
      <Button.button variant="secondary">Secondary</Button.button>
    </div>
  )
}

import { Button } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.button type="button">Button.button</Button.button>
      <Button.a href="#tags">Button.a</Button.a>
      <Button.div>Button.div</Button.div>
    </div>
  )
}

import { Button, ButtonIcon, ButtonTitle } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.a href="#with-an-icon" variant="primary">
        <ButtonTitle>Continue</ButtonTitle>
        <ButtonIcon />
      </Button.a>
      <Button.a href="#with-an-icon" variant="secondary">
        <ButtonIcon />
        <ButtonTitle>Leading icon</ButtonTitle>
      </Button.a>
      <Button.a href="#with-an-icon" variant="primary" className="w-64">
        <ButtonTitle>Full row</ButtonTitle>
        <ButtonIcon />
      </Button.a>
    </div>
  )
}

import { Button, ButtonIcon, ButtonTitle } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.button variant="primary">
        <ButtonIcon.svg viewBox="0 -960 960 960" fill="currentColor">
          <path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
        </ButtonIcon.svg>
        <ButtonTitle>Download</ButtonTitle>
      </Button.button>
      <Button.button variant="secondary">
        <ButtonTitle>Favorite</ButtonTitle>
        <ButtonIcon.svg viewBox="0 -960 960 960" fill="currentColor">
          <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z" />
        </ButtonIcon.svg>
      </Button.button>
    </div>
  )
}

import { Button, ButtonIcon, ButtonTitle } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.button variant="primary">
        <ButtonTitle className="sr-only!">Next step</ButtonTitle>
        <ButtonIcon />
      </Button.button>
      <Button.button variant="secondary" aria-label="Next step">
        <ButtonIcon />
      </Button.button>
    </div>
  )
}

import { Button, ButtonIcon, ButtonTitle } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.button variant="primary" disabled>
        <ButtonTitle>Saving…</ButtonTitle>
      </Button.button>
      <Button.button variant="secondary" disabled>
        <ButtonTitle>Continue</ButtonTitle>
        <ButtonIcon />
      </Button.button>
    </div>
  )
}

import { Button, ButtonTitle } from '@systhemaui/next'

export default function Demo() {
  return (
    <form className="flex flex-wrap items-center gap-4" action="#form-submit">
      <Button.button type="submit" variant="primary">
        <ButtonTitle>Subscribe</ButtonTitle>
      </Button.button>
      <Button.button type="reset" variant="secondary">
        <ButtonTitle>Reset</ButtonTitle>
      </Button.button>
    </form>
  )
}