Button

Generic Button Component

Props

Name	Type	Default	Options
showTrailingIcon	boolean
showLeadingIcon	boolean
buttonText	string	Button Text
size	string	xs	xs, sm, md, xl, lg
purpose	string	primary	primary, secondary, soft, link, solid

Compound Variant API

Size : xs, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xs'} purpose={'primary'}  />
}

Size : sm, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'sm'} purpose={'primary'}  />
}

Size : md, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'md'} purpose={'primary'}  />
}

Size : lg, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'lg'} purpose={'primary'}  />
}

Size : xl, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xl'} purpose={'primary'}  />
}

Size : xs, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xs'} purpose={'secondary'}  />
}

Size : sm, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'sm'} purpose={'secondary'}  />
}

Size : md, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'md'} purpose={'secondary'}  />
}

Size : lg, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'lg'} purpose={'secondary'}  />
}

Size : xl, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xl'} purpose={'secondary'}  />
}

Size : xs, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xs'} purpose={'soft'}  />
}

Size : sm, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'sm'} purpose={'soft'}  />
}

Size : md, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'md'} purpose={'soft'}  />
}

Size : lg, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'lg'} purpose={'soft'}  />
}

Size : xl, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xl'} purpose={'soft'}  />
}

Size : xs, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xs'} purpose={'link'}  />
}

Size : sm, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'sm'} purpose={'link'}  />
}

Size : md, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'md'} purpose={'link'}  />
}

Size : lg, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'lg'} purpose={'link'}  />
}

Size : xl, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xl'} purpose={'link'}  />
}

Size : xs, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xs'} purpose={'solid'}  />
}

Size : sm, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'sm'} purpose={'solid'}  />
}

Size : md, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'md'} purpose={'solid'}  />
}

Size : lg, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'lg'} purpose={'solid'}  />
}

Size : xl, Purpose

Button Text

import { Button } from '@simplethings/react'

export default () => {
  return <Button size={'xl'} purpose={'solid'}  />
}