Custom Text
Instead of icons, you can use text labels for the toggle button. This is useful for explicit “Show/Hide” actions.
In this example, we position the text button inside the input field using absolute positioning and style it as a link.
import { useViraPassword } from '@virastack/password-toggle';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
export function CustomTextDemo() {
const { inputProps, btnProps } = useViraPassword({
icons: {
show: <span>Show</span>,
hide: <span>Hide</span>,
},
});
return (
<div className="relative w-full max-w-sm">
<Input {...inputProps} className="pr-16" placeholder="Password" />
<Button
{...btnProps}
variant="link"
className="absolute right-0 top-0 h-full px-3 text-xs font-semibold text-muted-foreground hover:text-foreground"
>
{btnProps.children}
</Button>
</div>
);
}