Components

Button

Used to initiate an action or trigger the users

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Buttons are used to initiate an action or trigger the user to open a link. Buttons can contain a combination of clear and concise labels and can be equipped with icons.

import { Button } from 'legion-ui';

Variant

You can customise the appearance of the button via the variant prop, which accepts either solid, outline, soft, transparent.

<Button>Solid</Button>
<Button variant="outline">Outline</Button>
<Button variant="soft">Soft</Button>
<Button variant="transparent">Transparent</Button>
<Button variant="outlineSecondary">Outline Secondary</Button>
<Button variant="softSecondary">Soft Secondary</Button>

Color

You can also change the color of the button. Available options are listed as below:

<Button>Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="success">Success</Button>
<Button variant="outline" color="warning">Warning</Button>
<Button variant="soft" color="info">Info</Button>
<Button variant="transparent" color="error">Error</Button>
<Button variant="soft" color="success" iconRight={<DynamicIcon name="ArrowRight" />}>Continue</Button>

Size

You can customise the size of the button via the size prop, which accepts either lg, md, or sm.

Large Size

<Button size="lg">Solid</Button>
<Button size="lg" variant="outline">Outline</Button>
<Button size="lg" variant="soft">Soft</Button>
<Button size="lg" variant="transparent">Transparent</Button>

Medium Size

<Button size="md">Solid</Button>
<Button size="md" variant="outline">Outline</Button>
<Button size="md" variant="soft">Soft</Button>
<Button size="md" variant="transparent">Transparent</Button>

Small Size

<Button size="sm">Solid</Button>
<Button size="sm" variant="outline">Outline</Button>
<Button size="sm" variant="soft">Soft</Button>
<Button size="sm" variant="transparent">Transparent</Button>

Icons

You can insert icon in button on the left side, right side or icon only iconLeft or iconRight.

Icon Left

<Button iconLeft={<DynamicIcon name="Download" />}>Download</Button>
<Button variant="outline" iconLeft={<DynamicIcon name="Download" />}>Download</Button>
<Button variant="soft" iconLeft={<DynamicIcon name="Download" />}>Download</Button>
<Button variant="transparent" iconLeft={<DynamicIcon name="Download" />}>Download</Button>

Icon Right

<Button iconRight={<DynamicIcon name="Download" />}>Download</Button>
<Button variant="outline" iconRight={<DynamicIcon name="Download" />}>Download</Button>
<Button variant="soft" iconRight={<DynamicIcon name="Download" />}>Download</Button>
<Button variant="transparent" iconRight={<DynamicIcon name="Download" />}>Download</Button>

Icon Only

<Button iconLeft={<DynamicIcon name="Download" />}/>
<Button variant="outline" iconLeft={<DynamicIcon name="Download" />}/>
<Button variant="soft" iconLeft={<DynamicIcon name="Download" />}/>
<Button variant="transparent" iconLeft={<DynamicIcon name="Download" />}/>

Disabled

Make buttons look inactive by adding the disabled.

<Button disabled></Button>
<Button disabled variant="outline"></Button>
<Button disabled variant="soft"></Button>
<Button disabled variant="transparent"></Button>

Props

property	propType	required	default	description
color	`primary` \| `secondary` \| `info` \| `warning` \| `success` \| `error`	-	`primary`	Set the color of the button
disabled	boolean	-	false	Disabled state of button
iconLeft	`React.ReactNode`	-	-	Add icon to the left side of the button
iconRight	`React.ReactNode`	-	-	Add icon to the right side of the button
size	`sm` \| `md` \| `lg`	-	`md`	Set the size of button
style	object	-	-	The `style` prop lets you style elements inline
variant	`solid` \| `outline` \| `soft` \| `transparent`	-	`solid`	Button appearance’s variant

Do you have feedback?

Please let us know to make it better

Send Feedback