Button

import Button from 'frui/Button';
Copy

Props

NameTypeRequiredNotes
classNamestringNoStandard HTML class names
blockbooleanNobutton display block
colorstringNoCustom CSS hex or name
curvedbooleanNoSlight curved corners
errorbooleanNoRed badge
fullbooleanNobutton width 100%
infobooleanNoBlue badge
mutedbooleanNoGray badge
outlinebooleanNoBorder and text with color
pillbooleanNoMax rounded corners
solidbooleanNoFills badge with color
successbooleanNoGreen badge
styleCSS ObjectNoStandard CSS input
warningbooleanNoOrange badge
roundedbooleanNoRounded corners
xsbooleanNoExtra small button
smbooleanNoSmall button
mdbooleanNoMedium button
lgbooleanNoLarge button
xlbooleanNoExtra large button
xl2booleanNoXXL button
xl3booleanNoXXXL button
xl4booleanNoXXXXL button
xl5booleanNoXXXXXL button

Types

Buttons have the following types: info, warning, success, error, and muted.

<Button info>Submit Info</Button>
Copy
<Button warning>Submit Warning</Button>
Copy
<Button success>Submit Success</Button>
Copy
<Button error>Submit Error</Button>
Copy
<Button muted>Submit Muted</Button>
Copy

Custom Color

Buttons can have custom CSS compatible colors which includes hex and color names.

<Button color="salmon">Submit Custom</Button>
Copy

Rounded

Buttons can be rounded in three ways: curved, rounded, and pill.

<Button info curved>Submit Curved</Button>
Copy
<Button warning rounded>Submit Rounded</Button>
Copy
<Button success pill>Submit Pill</Button>
Copy

Stretch

Buttons have two stretching options: Turning it into a block, and/or stretch the width to full.

<Button info block full pill>Submit Block</Button>
Copy

Sizes

Buttons have sizes including: xs, sm, md, lg, xl, xl2, xl3, xl4, and xl5.

<Button info xs pill className="text-xs">Submit Extra Small</Button>
Copy
<Button warning sm pill className="text-sm">Submit Small</Button>
Copy
<Button success md pill className="text-md">Submit Medium</Button>
Copy
<Button error lg pill className="text-lg">Submit Large</Button>
Copy
<Button muted xl pill className="text-xl">Submit Extra Large</Button>
Copy
<Button info xl2 pill className="text-2xl">Submit XXL</Button>
Copy
<Button warning xl3 pill className="text-3xl">Submit XXXL</Button>
Copy
<Button success xl4 pill className="text-4xl">Submit IVL</Button>
Copy
<Button error xl5 pill className="text-5xl">Submit VL</Button>
Copy

Custom Styles

You can add your own custom class to the button component or use the frui-btn CSS class.

Badges
Loaders