`<ActionControl>` Component

<ActionControl> is a clickable simple box layout component with built-in variants, states, and clicking feedback.

If you plan to create a custom button, this base component is a great starting point. It already handles the enter and space keys for triggering the onClick event for you. It also handles a special child: <Link href/to='...'>, a client side link in React Router/Next JS/Gatsby JS, for handling onClick event.

Installing `<ActionControl>` Component

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

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

Client Side Link

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

<ActionControl> 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 <ActionControl>, at render phase, the hierarchy of <ActionControl> and <Link> is automatically swapped for you. Here the illustration:

Show code

Variant Properties

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

`size` Property

Defines the alternative size of the <ActionControl>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

An <ActionControl> with sm size

An <ActionControl> with md size

An <ActionControl> with lg size

Show code

`theme` Property

Defines the contextual theme of the <ActionControl>.

The possible values are:

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

Here the preview:

An <ActionControl> with primary theme

An <ActionControl> with secondary theme

An <ActionControl> with success theme

An <ActionControl> with info theme

An <ActionControl> with warning theme

An <ActionControl> with danger theme

An <ActionControl> with light theme

An <ActionControl> with dark theme

Show code

`gradient` Property

Activates a 3D mode of the <ActionControl>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <ActionControl> with gradient mode

Show code

`outlined` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <ActionControl> with outlined mode

Show code

`mild` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

An <ActionControl> without mild mode

Show code

`nude` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <ActionControl> with nude mode

Show code

State Properties

The conditions of the <ActionControl> behavior or functionality.

`enabled` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <ActionControl> with disabled state

Show code

`inheritEnabled` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <ActionControl> with inherit enabled

Show code

`active` Property

Defines the current active state of the <ActionControl>.

The possible values are:

undefined
true
false

Here the preview:

An <ActionControl> with active state

Show code

`inheritActive` Property

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

The possible values are:

undefined
true
false

Here the preview:

An <ActionControl> with inherit active

Show code

`pressed` Property

Shows the pressed indicator of the <ActionControl>.

The possible values are:

undefined
true
false

Here the preview: