ButtonLink

import { ButtonLink } from 'sxa-ui'


function Demo() {
  return (
    <ButtonLink label='Button' />
  )
}

export default Demo

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

function Demo() {
  return (
    <Stack direction={Stack.directions.vertical} gap={spacing.m}>
      <ButtonLink
        label='Button Link'
        iconStart={RiArrowRightSLine}
      />
      <ButtonLink
        label='Button Link'
        iconEnd={RiArrowRightSLine}
      />
      <ButtonLink
        label='Button Link'
        iconStart={RiAddLine}
        iconEnd={RiArrowRightSLine}
      />
    </Stack>
  )
}

export default Demo

import { ButtonLink } from 'sxa-ui'

function Demo() {
  return (
    <ButtonLink
      label='Button Link'
      disabled
    />
  )
}

export default Demo

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

function Demo() {
  return (
    <Stack direction={Stack.directions.vertical} gap={spacing.m}>
      <ButtonLink
        label='Button Link'
        loading
      />
      <ButtonLink
        label='Button Link'
        iconStart={RiArrowRightSLine}
        loading
      />
      <ButtonLink
        label='Button Link'
        iconEnd={RiArrowRightSLine}
        loading
      />
      <ButtonLink
        label='Button Link'
        iconStart={RiAddLine}
        iconEnd={RiArrowRightSLine}
        loading
      />

      <ButtonLink
        label='Button Link'
        loading
        disabled
      />
      <ButtonLink
        label='Button Link'
        iconStart={RiArrowRightSLine}
        loading
        disabled
      />
      <ButtonLink
        label='Button Link'
        iconEnd={RiArrowRightSLine}
        loading
        disabled
      />
      <ButtonLink
        label='Button Link'
        iconStart={RiAddLine}
        iconEnd={RiArrowRightSLine}
        loading
        disabled
      />
    </Stack>
  )
}

export default Demo