ButtonIcon

Demos

Default

import { ButtonIcon } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'


function Demo() {
  return (
    <ButtonIcon icon={RiArrowRightSLine} />
  )
}

export default Demo

Ghost

import { ButtonIcon } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'


function Demo() {
  return (
    <ButtonIcon variant={ButtonIcon.variants.ghost} icon={RiArrowRightSLine} />
  )
}

export default Demo

Tiny

import { ButtonIcon } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'


function Demo() {
  return (
    <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiArrowRightSLine} />
  )
}

export default Demo

Disabled

import { ButtonIcon } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'


function Demo() {
  return (
    <ButtonIcon icon={RiArrowRightSLine} disabled />
  )
}

export default Demo

Ghost (Disabled)

import { ButtonIcon } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'


function Demo() {
  return (
    <ButtonIcon variant={ButtonIcon.variants.ghost} disabled icon={RiArrowRightSLine} />
  )
}

export default Demo

Loading

import { Stack, spacing, ButtonIcon } from 'sxa-ui'
import {
  RiArrowRightSLine,
} from '@remixicon/react'


function Demo() {
  return (
    <Stack direction={Stack.directions.vertical} gap={spacing.m}>
        <ButtonIcon icon={RiArrowRightSLine} loading />
        <ButtonIcon variant={ButtonIcon.variants.ghost} icon={RiArrowRightSLine} loading />
        <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiArrowRightSLine} loading />
        <ButtonIcon icon={RiArrowRightSLine} disabled loading />
        <ButtonIcon variant={ButtonIcon.variants.ghost} disabled icon={RiArrowRightSLine} loading />
        <ButtonIcon icon={RiArrowRightSLine} disabled loading />
        <ButtonIcon tiny variant={ButtonIcon.variants.ghost} disabled icon={RiArrowRightSLine} loading />
    </Stack>
  )
}

export default Demo