Button

Demos

Primary

import { Button } from 'sxa-ui'


function Demo() {
  return (
    <Button label='Button' variant={Button.variants.primary} />
  )
}

export default Demo

Secondary

import { Button } from 'sxa-ui'


function Demo() {
  return (
    <Button label='Button' variant={Button.variants.secondary} />
  )
}

export default Demo

Disabled

import { Button } from 'sxa-ui'


function Demo() {
  return (
    <Button label='Button' disabled variant={Button.variants.secondary} />
  )
}

export default Demo

Icons

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

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

export default Demo

Loading

If a button has an icon, it is replaced by the loading spinner.

When no icon is present, the label is replaced instead while still maintaining the button's original width.

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

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

      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        disabled
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        iconStart={RiArrowRightSLine}
        disabled
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        iconEnd={RiArrowRightSLine}
        disabled
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        iconStart={RiAddLine}
        iconEnd={RiArrowRightSLine}
        disabled
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        iconStart={RiArrowRightSLine}
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        iconEnd={RiArrowRightSLine}
      />
      <Button
        loading
        label='Button'
        variant={Button.variants.primary}
        iconStart={RiAddLine}
        iconEnd={RiArrowRightSLine}
      />
    </Stack>
  )
}

export default Demo