Usage

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

<IconButton />

Examples

Color

Default

b

Type

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

import { IconButton } from '@pillar-ui/core'
import { Netflex } from '@pillar-ui/icons'

export function IconButtonColor() {
  return (
    <>
      <IconButton title="hello" icon={<Netflex />} color="d" />
      <IconButton title="hello" icon={<Netflex />} color="w" />
      <IconButton title="hello" icon={<Netflex />} color="su" />
      <IconButton title="hello" icon={<Netflex />} color="p" />
      <IconButton title="hello" icon={<Netflex />} color="se" />
      <IconButton title="hello" icon={<Netflex />} color="b" />
      <IconButton title="hello" icon={<Netflex />} color="i" />
    </>
  )
}

Size

Default

4

Type

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

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

export function IconButtonSize() {
  return (
    <>
      <IconButton title="Heelo" icon={<ZoomPlus />} size="1" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="2" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="3" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="4" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="5" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="6" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="7" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="8" />
      <IconButton title="Heelo" icon={<ZoomPlus />} size="9" />
    </>
  )
}

Corner

Default

2

Type

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

import { IconButton, Paper } from '@pillar-ui/core'
import { Netflex } from '@pillar-ui/icons'

export function IconButtonCorner() {
  return (
    <>
      <IconButton title="Heelo" icon={<Netflex />} corner="0" />
      <IconButton title="Heelo" icon={<Netflex />} corner="1" />
      <IconButton title="Heelo" icon={<Netflex />} corner="2" />
      <IconButton title="Heelo" icon={<Netflex />} corner="3" />
      <IconButton title="Heelo" icon={<Netflex />} corner="4" />
      <IconButton title="Heelo" icon={<Netflex />} corner="5" />
      <IconButton title="Heelo" icon={<Netflex />} corner="circle" />
      <IconButton title="Heelo" icon={<Netflex />} corner="full" />
    </>
  )
}

Variant

Default

solid

Type

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

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

export function IconButtonVariant() {
  return (
    <>
      <IconButton title="Hello" color="d" variant="shadow" icon={<ZoomPlus />} />
      <IconButton title="Hello" color="d" variant="solid" icon={<ZoomPlus />} />
      <IconButton title="Hello" color="d" variant="mixed" icon={<ZoomPlus />} />
      <IconButton title="Hello" color="d" variant="soft" icon={<ZoomPlus />} />
      <IconButton title="Hello" color="d" variant="outline" icon={<ZoomPlus />} />
      <IconButton title="Hello" color="d" variant="text" icon={<ZoomPlus />} />
    </>
  )
}

State

import { IconButton } from '@pillar-ui/core'
import { Netflex } from '@pillar-ui/icons'

export function IconButtonState() {
  return (
    <>
      <IconButton title="Hello" icon={<Netflex />} state="idle" />
      <IconButton title="Hello" icon={<Netflex />} state="loading" />
    </>
  )
}

Disabled

Default

false

Type

boolean

import { IconButton } from '@pillar-ui/core'
import { UserAdd } from '@pillar-ui/icons'

export function IconButtonDisabled() {
  return (
    <>
      <IconButton title="Hello" icon={<UserAdd />} />
      <IconButton title="Hello" icon={<UserAdd />} disabled />
    </>
  )
}

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:;