Button

Import

import { Button } from '@narimanb/wreactui'

Size

There are four sizes, applied by the prop size: larger, large, small, and regular (default).

Code

<Button size="larger">Larger</Button>
<Button size="large">Large</Button>
<Button>Regular</Button>
<Button size="small">Small</Button>

Layout

There are three styles, applied by the prop layout: outline, link and primary (default).

Code

<Button>Primary</Button>
<Button layout="outline">Outline</Button>
<Button layout="link">Link</Button>

Icon

There are three icon positions: icon applies an icon image centered in a button or, if it has children, has the same behavior as iconLeft. The other two are iconLeft and iconRight, perfect to use with text.

Code

<Button iconRight={HeartIcon}>Icon right</Button>
<Button iconLeft={HeartIcon}>Icon left</Button>
<Button iconLeft={HeartIcon} iconRight={EditIcon}>Two icons</Button>
<Button icon={HeartIcon} aria-label="Like" />
<Button icon={HeartIcon} layout="link" aria-label="Like" />
<Button icon={HeartIcon} layout="outline" aria-label="Like" />

Disabled

The disabled prop applies disabled styles to any button.

Code

<Button disabled>Primary</Button>
<Button disabled layout="outline">Outline</Button>
<Button disabled layout="link">Link</Button>

Block

The block property is a shortcut for className="w-full" and makes the Button span the whole width of its parent.

Code

<Button block>Primary</Button>
<Button block layout="outline">Outline</Button>
<Button block layout="link">Link</Button>

Tag

The tag is responsible for rendering a specific HTML element as a Button, and is mostly used to create anchors styled as buttons. You can also pass another component as a tag, like a Link from react-router, eg: tag={Link}

Code

<Button tag="a" href="#">
  Primary
</Button>

Props overview

Prop	Description	Type	Default
size	define the size of component	larger, large, regular, small	regular
layout	define the layout of component	primary, outline, link	primary
icon	add an icon to the button	ReactNode
iconLeft	add an icon to the left of the button	ReactNode
iconRight	add an icon to the right of the button	ReactNode
disabled	disable state of button	boolean	false
block	expand full width	boolean	false
tag	define the element tag	string, ReactNode	button