<Button> Component

<Button> is a button component with built-in variants, states, and clicking feedback.

<Button> also handles a special child: <Link href/to='...'>, a client side link in React Router/Next JS/Gatsby JS, for handling onClick event.

The default tag is <button>, but can be automatically changed to <a> if href property is present -or- there is a client-side <Link> component inside the <Button>.

You can also manually change the tag and/or the role as well.

Here the demo:

Preview

Installing <Button> Component

There are 2 ways to install <Button> component into your react app project:

  • Install the Specific Package of <Button> Component
  • Install the Whole Reusable-UI Component Pack, including the <Button> Component

Client Side Link

Navigates between pages using JavaScript way, without causing a whole page HTTP request.

<Button> designed to work with <Link> component of React Router and Next JS (Gatsby JS and React Remix are coming soon).

When there is a <Link> component inside the <Button>, at render phase, the hierarchy of <Button> and <Link> is automatically swapped for you. Here the illustration:

Show code

href Property

Navigates to another pages or to external websites using traditional link.

onClick Property

Executes a JavaScript's callback function when the <Button> is clicked.

Variant Properties

The alternative appearances of the <Button> layout without changing the <Button>'s functionality.

buttonStyle Property

Sets the alternative appearances of the <Button>.

The possible values are:

  • undefined
  • 'regular'
  • 'link'
  • 'ghost'

Here the preview:

Preview

Show code

orientation Property

Sets the orientation of the <Button>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview

Show code

size Property

Defines the alternative size of the <Button>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview

Show code

theme Property

Defines the contextual theme of the <Button>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview

Show code

gradient Property

Activates a 3D mode of the <Button>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Button>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Button>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Button>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

State Properties

The conditions of the <Button> behavior or functionality.

enabled Property

Defines the enabled/disabled state of the <Button>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

inheritEnabled Property

Influences the <Button>'s disabled state by <ancestor enabled={false}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

active Property

Defines the current active state of the <Button>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

inheritActive Property

Influences the <Button>'s active state by <ancestor active={true}>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview

Show code

Variables

There are several variables of <Button> you can customize. Changing the variables affects all <Button> instance and other components that depend on <Button>.

Here the exposed variables:

  • Spacings
  • Typos
  • Styles

The example of accessing, modifying, & adding variables:

Show code