Docs
Duplex Button
Duplex Button
A component that can change its label, icon, and appearance based on active, hover and inactive states.
Installation
pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/duplex-button.json"
Usage
import {
DuplexButton,
DuplexButtonActive,
DuplexButtonHover,
DuplexButtonInactive,
} from "<path-to-ui-components>/duplex-button";const [subscribe, setSubscribe] = useState(false);
<DuplexButton active={subscribe}>
<DuplexButtonInactive
variant="default"
onClick={() => {
setSubscribe(true);
}}
>
Subscribe <UsersIcon size={16} />
</DuplexButtonInactive>
<DuplexButtonHover
variant="outline"
onClick={() => {
setSubscribe(false);
}}
>
Unsubscribe <UsersIcon size={16} />
</DuplexButtonHover>
<DuplexButtonActive>
Subscribed <UserIcon size={16} />
</DuplexButtonActive>
</DuplexButton>;Props
| Name | Type | Description |
|---|---|---|
| active | boolean | Checks if the component is currently active. |
| loading | boolean | Specifies whether the component is currently loading. |
| disabled | boolean | Specifies whether the component is disabled. |