ButtonCard

Card with button and text


import { ButtonCard } from '@kalidao/reality'

<ButtonCard buttonText="Connect Wallet" prefix={<IconExclamationCircle color="accent" />} width="96">
  Collecting this entry requires a minimum balance of{' '}
  <Text as="span" color="inherit" size="inherit" weight="semiBold">
    0.1 Optimistic ETH
  </Text>
  . You can resolve this by bridging your ETH to oETH.
</ButtonCard>

<ButtonCard buttonText="Connect Wallet" prefix={<IconExclamationCircle color="accent" />} width="96">
  Collecting this entry requires a minimum balance of{' '}
  <Text as="span" color="inherit" size="inherit" weight="semiBold">
    0.1 Optimistic ETH
  </Text>
  . You can resolve this by bridging your ETH to oETH.
</ButtonCard>

Open in Playroom

Props
#

name	type	default	description
as	"button" \| "a"	-	-
buttonText* Required	string	-	Text displayed on button
loading	boolean	-	Shows loading spinner inside button
prefix	ReactNodeNoStrings	-	Adds ReactNode before children
suffix	ReactNodeNoStrings	-	Adds ReactNode after children
width	ConditionalStyle<Values<{ '112': string; '128': string; '144': string; '168': string; '180': string; '192': string; '224': string; '256': string; '288': string; '320': string; '1/4': string; '1/3': string; '1/2': string; '2/3': string; '3/4': string; screenSm: 640; ... 49 more ...; none: CSSVarFunction; }, { ...; }>>	-	-

Edit on GitHub

Props#

Props
#