Button

Used to trigger an action or event

import { Button } from '@fidely-ui/react/button'

export const ButtonBasics = () => {
  return <Button>Click Me</Button>
}

Usage

import { Button } from '@fidely-ui/react/button'

<Button>Click Me</Button>

Sizes

You can control the size of the Button using the size prop.

import { Button, HStack } from '@fidely-ui/react'

export const ButtonSize = () => {
  return (
    <HStack gap="6">
      <Button size="xs">Button (xs)</Button>
      <Button size="sm">Button (sm)</Button>
      <Button size="md">Button (md)</Button>
      <Button size="lg">Button (lg)</Button>
      <Button size="xl">Button (xl)</Button>
    </HStack>
  )
}

Variants

You can control the appearance of the button using the variant prop.

import { Button, HStack } from '@fidely-ui/react'

export const ButtonVariant = () => {
  return (
    <HStack gap="6">
      <Button variant={'solid'}>solid</Button>
      <Button variant={'subtle'}>subtle</Button>
      <Button variant={'ghost'}>ghost</Button>
      <Button variant={'outline'}>outline</Button>
      <Button variant={'plain'}>plain</Button>
    </HStack>
  )
}

Renders a button as link

Use the asChild prop to render the button as another element, such as a link.

Fidely UI

import { Button } from '@fidely-ui/react/button'

export const ButtonAsLink = () => {
  return (
    <Button asChild>
      <a href="https://fidely-ui.vercel.app" target="_blank">
        Fidely UI
      </a>
    </Button>
  )
}

Ripple Effect

Use the ripple prop to enable a ripple animation.

By default, Fidely UI uses the current button color as the ripple background.

import { Button } from '@fidely-ui/react/button'

export const ButtonRipple = () => {
  return <Button ripple>ripple button</Button>
}

With Icon

Use icons within a button

import { Button, HStack } from '@fidely-ui/react'
import { RiArrowRightLine, RiMailLine } from 'react-icons/ri'

export const ButtonWithIcon = () => {
  return (
    <HStack gap={3}>
      <Button colorPalette="orange" variant="solid">
        <RiMailLine /> Email
      </Button>
      <Button colorPalette="orange" variant="outline">
        Call us <RiArrowRightLine />
      </Button>
    </HStack>
  )
}

Loading Button

Use the isLoading prop to show a loading spinner inside the button while an action is in progress.

import { Button } from '@fidely-ui/react/button'

export const ButtonLoading = () => {
  return <Button isLoading>Fidely UI</Button>
}

Loading Button with Text

Use the isLoading and loadingText props together to display custom text while loading.

import { Button } from '@fidely-ui/react/button'

export const ButtonLoadingText = () => {
  return (
    <Button isLoading loadingText="loading...">
      Fidely UI
    </Button>
  )
}

Disabled

Use the disabled prop to disable the button.

import { Button } from '@fidely-ui/react/button'

export const ButtonDisabled = () => {
  return <Button disabled>disabled</Button>
}

Spinner Placement

Use the spinnerPlacement prop to set the placement of the spinner.

import { HStack } from '@fidely-ui/react'
import { Button } from '@fidely-ui/react/button'

export const ButtonSpinnerPlacement = () => {
  return (
    <HStack gap={3}>
      <Button isLoading spinnerPlacement="start">
        start
      </Button>

      <Button isLoading spinnerPlacement="end">
        end
      </Button>
    </HStack>
  )
}

With Custom Spinner

Use the spinner prop to change the spinner.

import { Button, HStack } from '@fidely-ui/react'
import { BeatLoader, DotLoader } from 'react-spinners'

export const ButtonCustomSpinner = () => {
  return (
    <HStack gap={3}>
      <Button isLoading spinner={<BeatLoader size={8} color="white" />}>
        Loader 1
      </Button>

      <Button isLoading spinner={<DotLoader size={15} color="white" />}>
        Loader 2
      </Button>
    </HStack>
  )
}

Props

Button

Prop	Default	Type	Description
`spinnerPlacement`	`start`	`'start' \| 'end' \| undefined`	The placement of the spinner.
`colorPalette`	`gray`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	The color palette of the component.
`size`	`md`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	The size of the button.
`variant`	`solid`	`'solid' \| 'subtle' \| 'outline' \| 'ghost' \| 'plain'`	The variant that defines the button's visual style.
`loading`	—	`boolean \| undefined`	If `true`, the button will display a loading spinner.
`loadingText`	—	`React.ReactNode \| undefined`	The text to display while the button is loading.
`spinner`	—	`React.ReactNode \| undefined`	The spinner element to render while loading.
`as`	—	`React.ElementType`	The underlying element to render.
`asChild`	`false`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.