Button

Imports

Button: The main component to display a list of accordion items.

Usage

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button rippleColor="ligth">
      Default
    </Button>
  )
}

Examples

Primary

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button variant="primary">
      Primary
    </Button>
  )
}

Success

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button variant="success">
      Success
    </Button>
  )
}

Warn

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button variant="warn">
      Warn
    </Button>
  )
}

Error

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button variant="error">
      Error
    </Button>
  )
}

Ghost

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button variant="ghost">
      Ghost
    </Button>
  )
}

Outline

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <div className="flex flex-col gap-2">
      <Button outline="default">
        Outline default
      </Button>
      <Button outline="primary">
        Outline primary
      </Button>
      <Button outline="success">
        Outline success
      </Button>
      <Button outline="warn">
        Outline warn
      </Button>
      <Button outline="error">
        Outline error
      </Button>
    </div>
  )
}

Size

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <div className="flex flex-col gap-2">
      <Button size="sm" rippleColor="ligth">
        Size sm
      </Button>
      <Button size="md" rippleColor="ligth">
        Size md
      </Button>
      <Button size="lg" rippleColor="ligth">
        Size lg
      </Button>
    <Button size="icon" outline="default">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 18h4M2.351 13.214c-.353-2.298-.53-3.446-.095-4.465c.434-1.018 1.398-1.715 3.325-3.108L7.021 4.6C9.418 2.867 10.617 2 12 2s2.582.867 4.979 2.6l1.44 1.041c1.927 1.393 2.89 2.09 3.325 3.108c.434 1.019.258 2.167-.095 4.464l-.301 1.96c-.5 3.256-.751 4.884-1.919 5.856s-2.875.971-6.29.971H10.86c-3.415 0-5.122 0-6.29-.971c-1.168-.972-1.418-2.6-1.919-5.857z" color="currentColor"/></svg>
    </Button>
    </div>
  )
}

Rounded

import * as React from 'react'
import { Button } from '@openlite/ui'
 
function App() {
  return (
    <Button rounded="none" rippleColor="ligth">
      Rounded
    </Button>
  )
}

API

Button Props

Props	Type	Description
`variant`	`'default' \| 'primary' \| 'success' \| 'warn' \| 'error'`	The variant of the button.
`rounded`	`'none' \| 'sm' \| 'md' \| 'lg'`	The rounded of the button.
`outline`	`'default' \| 'primary' \| 'success' \| 'warn' \| 'error'`	The outline of the button.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon'`	The size of the button.
`ripple`	`boolean`	The ripple of the button.
`rippleColor`	`'ligth' \| 'dark'`	The ripple color of the button.

Button

On this page