-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Open
Labels
Description
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'.
Reactions are currently unavailable