Skip to content

Replace status prop with checked in ToggleButton component #4866

@azizbecha

Description

@azizbecha

Is your feature request related to a problem? Please describe.
The ToggleButton component currently uses a status prop with string values checked | unchecked. This adds unnecessary complexity for a binary state.

Describe the solution you'd like
Replace the status prop with a boolean checked prop.

Before:

const ToggleButtonExample = () => {
  const [status, setStatus] = React.useState('checked');

  const onButtonToggle = () => {
    setStatus(status === 'checked' ? 'unchecked' : 'checked');
  };

  return (
    <ToggleButton
      icon="bluetooth"
      value="bluetooth"
      status={status}
      onPress={onButtonToggle}
    />
  );
};

After:

const ToggleButtonExample = () => {
  const [isChecked, setIsChecked] = React.useState(true);

  const onButtonToggle = () => {
    setIsChecked(s => !s);
  };

  return (
    <ToggleButton
      icon="bluetooth"
      value="bluetooth"
      checked={isChecked}
      onPress={onButtonToggle}
    />
  );
};

Additional context
A boolean checked prop is simpler, clearer, and more consistent with common React patterns than using string values like 'checked' and 'unchecked'.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions