`<Control>` Component

<Control> is an interactive simple box layout component with built-in variants, states, and interaction states: focus feedback and interactive feedback.

Installing `<Control>` Component

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

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

Variant Properties

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

`size` Property

Defines the alternative size of the <Control>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

A <Control> with sm size

A <Control> with md size

A <Control> with lg size

Show code

`theme` Property

Defines the contextual theme of the <Control>.

The possible values are:

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

Here the preview:

A <Control> with primary theme

A <Control> with secondary theme

A <Control> with success theme

A <Control> with info theme

A <Control> with warning theme

A <Control> with danger theme

A <Control> with light theme

A <Control> with dark theme

Show code

`gradient` Property

Activates a 3D mode of the <Control>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

A <Control> with gradient mode

Show code

`outlined` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

A <Control> with outlined mode

Show code

`mild` Property

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

The possible values are:

undefined
'inherit'
true
false

Here the preview:

A <Control> without mild mode

Show code

`nude` Property

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

The possible values are:

undefined
true
false

Here the preview:

A <Control> with nude mode

Show code

State Properties

The conditions of the <Control> behavior or functionality.

`enabled` Property

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

The possible values are:

undefined
true
false

Here the preview:

A <Control> with disabled state

Show code

`inheritEnabled` Property

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

The possible values are:

undefined
true
false

Here the preview:

A <Control> with inherit enabled

Show code

`active` Property

Defines the current active state of the <Control>.

The possible values are:

undefined
true
false

Here the preview:

A <Control> with active state

Show code

`inheritActive` Property

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

The possible values are:

undefined
true
false

Here the preview:

A <Control> with inherit active

Show code

`focused` Property

Shows the focus indicator of the <Control>.

The possible values are:

undefined
true
false

Here the preview:

A <Control> with focus indicator

Show code

`arrived` Property

Shows the arrive indicator (being touched but not clicked) of the <Control>.

It's similar to :is(:hover, :focus-visible) in CSS, but we toggle our :hover by our logic way (controllable and/or uncontrollable). In the future, we may change our algorithm to determine how the control will interact with the user.

The possible values are:

undefined
true
false

Here the preview: