Button

A polymorphic component that can render as a semantic <button> or <a> element depending on the props provided. This design exists to serve as a single source of truth for the appearance of button-like elements.

import { Button, T } from '@kaynora/ui'

export default function () {
  return (
    <Button>
      <T>Submit</T>
    </Button>
  )
}

The href and onClick props determine the action(s) performed by the button. If href is defined, a native <a> tag is rendered. Otherwise, the <button> element is used internally.

import { Button, Modal, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [isModalOpen, setIsModalOpen] = useState(false)

  return (
    <>
      <Modal
        isOpen={isModalOpen}
        onOpenChange={setIsModalOpen}
      >
        <div style={{
          padding: '40px',
          backgroundColor: 'var(--background)',
          borderRadius: 'var(--radius)',
          textAlign: 'center',
          minWidth: '300px',
        }}>
          <T>You're all caught up!</T>
        </div>
      </Modal>

      <div style={{
        display: 'flex',
        flexFlow: 'row wrap',
        alignItems: 'center',
        gap: '20px',
      }}>
        <Button onClick={() => setIsModalOpen(true)}><T>See Notifications</T></Button>
        <Button href='#'><T>Scroll to Top</T></Button>
      </div>
    </>
  )
}

The surface prop determines the visual style of the button.

import { Button, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'row wrap',
      alignItems: 'center',
      gap: '20px',
    }}>
      <Button surface='fill'><T>Dashboard</T></Button>
      <Button surface='outline'><T>Dashboard</T></Button>
      <Button surface='hollow'><T>Dashboard</T></Button>
      <Button surface='text'><T>Dashboard</T></Button>
    </div>
  )
}

The size prop determines the amount of padding on the button.

import { Button, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'row wrap',
      alignItems: 'center',
      gap: '20px',
    }}>
      <Button size='s'><T>Create post</T></Button>
      <Button size='m'><T>Create post</T></Button>
      <Button size='l'><T>Create post</T></Button>
    </div>
  )
}

The width prop determines whether the button stretches to fit its container or shrinks to fit its content.

import { Button, T } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      width: '100%',
      display: 'flex',
      flexFlow: 'column',
      gap: '20px',
    }}>
      <Button width='full'><T>Submit</T></Button>
      <Button width='auto'><T>Submit</T></Button>
    </div>
  )
}

<Button />

ReactElement | ReactElement[]

((e: MouseEvent) => void)

string

'fill' | 'outline' | 'hollow' | 'text'

's' | 'm' | 'l'

'auto' | 'full'

boolean

{
  root: HTMLElementProps
}