Usage

import { Button } from '@pillar-ui/core'

<Button />

Examples

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Button, Flex, IconButton } from '@pillar-ui/core'
import { ZoomPlus } from '@pillar-ui/icons'

export function ButtonColor() {
  return (
    <>
      <Button color="d">Hello World</Button>
      <Button color="w">Hello World</Button>
      <Button color="su">Hello World</Button>
      <Button color="p">Hello World</Button>
      <Button color="se">Hello World</Button>
      <Button color="b">Hello World</Button>
      <Button color="i">Hello World</Button>
    </>
  )
}

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Button, Flex, IconButton } from '@pillar-ui/core'
import { ZoomPlus } from '@pillar-ui/icons'

export function ButtonSize() {
  return (
    <>
      <Button size="1">Hello World</Button>
      <Button size="2">Hello World</Button>
      <Button size="3">Hello World</Button>
      <Button size="4">Hello World</Button>
      <Button size="5">Hello World</Button>
      <Button size="6">Hello World</Button>
      <Button size="7">Hello World</Button>
      <Button size="8">Hello World</Button>
      <Button size="9">Hello World</Button>
    </>
  )
}

Corner

Default

3

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full'

import { Button, Flex, IconButton, Paper } from '@pillar-ui/core'
import { ZoomPlus } from '@pillar-ui/icons'

export function ButtonCorner() {
  return (
    <>
      <Button corner="0">Hello World</Button>
      <Button corner="1">Hello World</Button>
      <Button corner="2">Hello World</Button>
      <Button corner="3">Hello World</Button>
      <Button corner="4">Hello World</Button>
      <Button corner="5">Hello World</Button>
      <Button corner="circle">Hello World</Button>
      <Button corner="full">Hello World</Button>
    </>
  )
}

Variant

Default

solid

Type

'shadow' | 'solid' | 'outline' | 'soft' | 'mixed'

import { Button } from '@pillar-ui/core'

export function ButtonVariant() {
  return (
    <>
      <Button variant="shadow">Green</Button>
      <Button variant="solid">Green</Button>
      <Button variant="mixed">Green</Button>
      <Button variant="soft">Green</Button>
      <Button variant="outline">Green</Button>
      <Button variant="link">Green</Button>
      <Button variant="text">Green</Button>
    </>
  )
}

Icon

import { Button } from '@pillar-ui/core'
import { Close, Maximize, Minimize } from '@pillar-ui/icons'

export function ButtonIcon() {
  return (
    <>
      <Button>Hello World</Button>
      <Button icon={<Close />}>Hello World</Button>
    </>
  )
}

IconPosition

Default

start

Type

'start' | 'end'

import { Button } from '@pillar-ui/core'
import { Close, Maximize, Minimize } from '@pillar-ui/icons'

export function ButtonIconPosition() {
  return (
    <>
      <Button>Hello World</Button>
      <Button icon={<Close />}>Hello World</Button>
      <Button icon={<Close />} iconPosition="start">
        Hello World
      </Button>
      <Button icon={<Close />} iconPosition="end">
        Hello World
      </Button>
    </>
  )
}

Fuild

Default

false

Type

boolean

import { Button } from '@pillar-ui/core'

export function ButtonFluid() {
  return (
    <>
      <Button fluid color="d">
        Hello World
      </Button>
      <Button fluid color="w">
        Hello World
      </Button>
      <Button fluid color="su">
        Hello World
      </Button>
      <Button fluid color="p">
        Hello World
      </Button>
      <Button fluid color="se">
        Hello World
      </Button>
      <Button fluid color="b">
        Hello World
      </Button>
    </>
  )
}

State

Default

idle

Type

'idle' | 'loading'

import { Button } from '@pillar-ui/core'

export function ButtonState() {
  return (
    <>
      <Button state="idle" color="su">
        Idle
      </Button>
      <Button state="loading" color="su">
        Loading
      </Button>
    </>
  )
}

Disabled

Default

false

Type

boolean

import { Button } from '@pillar-ui/core'

export function ButtonDisabled() {
  return (
    <>
      <Button>Hello World</Button>
      <Button disabled>Hello World</Button>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Button */
--button-rad:;
/* Change the default size of the Button */
--button-size:;
/* Change the default text transform of the Button */
--button-size:;