Two State Button

The Two State Button control is a special button variation that has two states: unpressed and pressed. You can add a click handler for a button, change the button's state, provide separate content for the pressed and unpressed states, set an appropriate button's type and make a button disabled whenever you need it.

Related resources

• Get the widget by installing the @svar-ui/react-core package.
• Check Two State Button API Reference to see the list of configuration properties.
• Explore the samples to visualize the available features.

Initialization

To create an instance of the Two State button on a page (React), you need to complete the following steps:

• import the component in your file:

App.jsx

import { TwoState } from "@svar-ui/react-core";

• use the <TwoState> element to initialize the control:

App.jsx

export default function App() {
  return <TwoState>Click Me</TwoState>;
}

Setting the value

By default, Two State button is initialized in the unpressed state. To enable the pressed state of the button, set the value property to true:

<TwoState value={true}>
  Click me
</TwoState>

Setting different content for each state

You can provide different content for the default (unpressed) and the pressed states of Two State button:

• for the unpressed state, specify the text property
• for the pressed state, specify the textActive property

<TwoState text="Click me" textActive="Working..." />

It is possible to use different icons for both states of the button. Read more in the Adding icons into buttons section.

Related sample: Two State Button

Getting the current state

You can get the current state of the Two State button using React state. For this:

• create a state variable that will contain the value of the button (it may contain the initial value):

import { useState } from "react";
import { TwoState } from "@svar-ui/react-core";

export default function App() {
  const [state, setState] = useState(true);

  return <TwoState value={state} onChange={({ value }) => setState(value)} />;
}

Catching the change of the button state

To catch when a button is pressed or unpressed, handle the change event. The handler receives an object with the state of the button:

function handleChange({ value }) {
  console.log(value);
}

<TwoState onChange={handleChange} />

The handler function for the change event receives an object where value is true (pressed) or false (unpressed).

Specifying the appearance of a button

Specify the desired look and feel of a Two State button by setting the corresponding type via the type property.

<TwoState type={'primary'}>Click Me</TwoState>

The Two State Button control inherits its types from SVAR Button. The list below provides the available types of the Two State Button.

• 'default'

• 'primary'

• 'secondary'

• 'danger'

• 'link' (can have an icon and be disabled as well as a standard button)

Related sample: Two State Button

Using a button block

There is a special button type that you can use if you need a button to span the full width of its parent. It is called a button block and has two sub-types:

• 'primary block' (has the primary styling)

• 'secondary block' (has the secondary styling)

Related sample: Two State Button

Handling a button click

To add a click handler function to your button, use the click event (React: onClick).

function myFunction() {
  // some custom logic
}

<TwoState onClick={myFunction}>Click Me</TwoState>

Showing a message on click

SVAR provides an extended messaging system to implement user-app communication. A common case for a button click is showing a notice or a dialog. You can use the library helpers from context with React's useContext to display a message box while handling a Two State button click.

Example using the showNotice helper:

import { useContext } from "react";
import { context } from "@svar-ui/react-core";
import { TwoState } from "@svar-ui/react-core";

export default function App() {
  // getting the helper from shared context
  const { showNotice } = useContext(context.helpers);

  // add a handler function
  function handleClick() {
    // using the helper to show a message
    showNotice({
      text: "Two State Button is clicked",
    });
  }

  return (
    <div>
      {/* calling the function on a two state button click */}
      <TwoState onClick={handleClick}>Click Me</TwoState>
    </div>
  );
}

Related sample: Two State Button

You can read detailed information on Messages in the Guides.

Making a button inactive

You can make a button unclickable by preventing the default click handling via the click handler. Call the preventDefault() method of the Event interface inside the handler function:

<TwoState onClick={ev => ev.preventDefault()}>
  Click me
</TwoState>

Related sample: Two State Button

Setting the disabled state

Render a disabled Two State button with the disabled property. You can either set the property to true or use the property name without a value (JSX interprets presence as true):

<TwoState disabled={true}>Click me</TwoState>

or

<TwoState disabled>Click Me</TwoState>

Related sample: Two State Button

Adding a title

A title is a tooltip text that appears when hovering the mouse cursor over a button and may contain extra information about the control. Use the title property to add a tooltip:

<TwoState title="Click me and I will change my state">Click Me</TwoState>

Related sample: Two State Button

Styling a button

You can add a custom style to the Two State button control. Provide the desired CSS in your stylesheet and set the name of the custom class as a value of the css property in the component's props.

<div className="demo-box">
  <TwoState type={'primary'} css="my">
    Click Me
  </TwoState>
</div>

Example CSS (global stylesheet):

/* styling the button in the default state */
.demo-box button.my {
  background-color: gold;
  color: white;
}

/* styling the button in the pressed state */
.demo-box button.pressed {
  background-color: lightgrey;
  color: white;
}

In the above example the selector includes the HTML element ("button") to be specific for the underlying element rendered by the control. Adjust selectors to match how the TwoState component renders markup in your environment.

Styling a pressed button

To change the style of a button in the pressed state, add the .pressed selector for the button and provide the desired style attributes for it (see CSS above).

Here's how the stylized Two State button looks like:

Adding icons into buttons

You can add icons into a Two State button. The name of a default icon starts with the wxi- prefix. Examples of using icons in different types of Two State buttons, both with and without text:

// an icon button with a text
<TwoState icon="wxi-alert">With Icon</TwoState>
<TwoState type={'primary'} icon="wxi-alert" iconActive="wxi-check">With Icon</TwoState>
<TwoState type={'secondary'} icon="wxi-alert">With Icon</TwoState>

// an icon button without a text
<TwoState icon="wxi-alert" />
<TwoState type={'primary'} icon="wxi-alert" />
<TwoState type={'secondary'} icon="wxi-alert" />
<TwoState type={'danger'} icon="wxi-alert" />

// a disabled icon button
<TwoState disabled icon="wxi-alert" />

Using the default icon pack

The default icons' set is based on the Material Design icons' collection. The list of predefined icons is presented in the snippet. This list is being constantly replenished with new icons.

To use the default icons' pack on a page, include the pack in your HTML:

<link rel="stylesheet" href="https://cdn.svar.dev/fonts/wxi/wx-icons.css" />

Then use the icon property to specify the desired icon name; default icon names are formed as wxi-name:

<TwoState icon="wxi-alert">Click Me</TwoState>

Related sample: Two State Button

Setting an icon for the pressed state

Besides the icon for the default state, Two State Button can have a special icon for the pressed state. Use the iconActive property to set the pressed-state icon:

<TwoState icon="wxi-alert" iconActive="wxi-check">With Icon</TwoState>

Related sample: Two State Button

Customizing the appearance of an icon

You can change the appearance of an icon by wrapping it in an <i> tag and using its style attribute. Example:

<TwoState type={'primary'}>
  <i className="wxi-alert" style={{ color: "yellow" }} />
  With Icon
</TwoState>