Chakra Components

Discover 12 Chakra Components available in Loopple

Button Icon Right

<Button data-type='Button' rightIcon='{<ArrowForwardIcon/>}' variant='solid'>
   Arrow
  </Button>

Button Icon Left

<Button data-type='Button' leftIcon='{<EmailIcon/>}' variant='solid'>
   Email
  </Button>

Input Outline

<Input data-type='Input' placeholder='Basic usage' />

Divider

<Divider data-type='Divider' my='4'></Divider>

Avatar Image

<Avatar data-type='Avatar' name='Dan Abrahmov' src='https://bit.ly/dan-abramov'></Avatar>

Textarea

<Textarea data-type='Textarea' placeholder='Here is a sample placeholder'></Textarea>

Input Filled

<Input data-type='Input' variant='filled' placeholder='Filled' />

Badge

<Badge data-type='Badge'>Default</Badge>

Avatar Group

<AvatarGroup data-type='AvatarGroup'>
 <Avatar data-type='Avatar' name='Ryan Florence' size='sm' src='https://bit.ly/ryan-florence'></Avatar>
 <Avatar data-type='Avatar' name='Segun Adebayo' size='sm' src='https://bit.ly/sage-adebayo'></Avatar>
 <Avatar data-type='Avatar' name='Kent Dodds' size='sm' src='https://bit.ly/kent-c-dodds'></Avatar>
 <Avatar data-type='Avatar' name='Prosper Otemuyiwa' size='sm' src='https://bit.ly/prosper-baba'></Avatar>
 <Avatar data-type='Avatar' name='Christian Nwamba' size='sm' src='https://bit.ly/code-beast'></Avatar>
</AvatarGroup>

Button

<Button data-type='Button' colorScheme='blue'>Button</Button>