# Buttons
Learn how to create nice css buttons, round buttons, icons in buttons, ripple effect on buttons and animated buttons.
Button
Buttons are clickable elements or components
PropDescriptionValue(s)
`text`To add your button text`String`
`startIcon`To add an icon component at the beginning`<Icon />`
`endIcon`To add an icon component at the end`<Icon />`
`rounded`To add rounded edge to your button`Boolean`
`outlined`To create an outlined button`Boolean`
`raised`To add a drop shadow effect to your button`Boolean`
`float`Create a circular button`Boolean`
`height`To set a height for your button`Css value:Eg, 1rem`
`width`To set a width for your button`Css value:Eg, 1rem`
`hoverUp`Translate the button up when a user hover on the button`Boolean`
`fullWidth`Set the width of the button to 100%`Boolean`
`isLoading`Create a loading button`Boolean`
`status`Set the status of a button`success | warning | info | danger`
`bold`Change the font weight to bold`Boolean`
`smaller`Create a smaller button`Boolean`
`small`Create a small button`Boolean`
`big`Creates a big button`Boolean`
`bigger`Creates a bigger button`Boolean`
`jumbo`Creates a huge button`Boolean`
`flat`Remove border radius`Boolean`
`fillAnimation`Add a fill animation`Boolean`
`fillDirection`animation direction`Boolean`
`fillTextColor`Text color when hovered`funui color`
`outlineSize`The size of the outline`Number`
#
Simple Button
using the <Button /> will create a simple cool button
React / Next.js Show Source Code

#
Status Button
These buttons can be used to specify the state of an event
React / Next.js Show Source Code
         
#
Loading Button
The isLoading prop is use to create a loading state button
React / Next.js Show Source Code
#
Button Sizes
Change the size of your button
React / Next.js Show Source Code
     
#
Fill Animation
Use the mouse to hover on the button to see the animation fill effect
React / Next.js Show Source Code
#
Outlined Button
The outlined prop is used to create an outlined button
React / Next.js Show Source Code
  
#
Raised Button
using the prop raised will create a shadow around your button.
React / Next.js Show Source Code
#
Circular Button
using the float prop will create a circular button, make sure to add a height and a width of the same value to create a perfect circle.
React / Next.js Show Source Code
#
Iconic Buttons
Icons can be use in buttons, buttons with icons look nicer, here is how you can insect an icon in your button.
React / Next.js Show Source Code
 
#
Button Group
Let's group our buttons with a RowFlex and justify them to the center, we will also use the flat to remove all border radius from the buttons.
React / Next.js Show Source Code