VisibleButton

Overview

The VisibleButton component provides a toggle button that switches between visible and hidden states. It's designed to be commonly used for showing/hiding sensitive information like passwords, API keys, or other confidential data with proper accessibility support.

Usage

import { useState } from 'react';
import { VisibleButton } from '@unkey/ui';
 
function Example() {
  const [isVisible, setIsVisible] = useState(false);
  
  return (
    <div>
      <VisibleButton 
        isVisible={isVisible} 
        setIsVisible={setIsVisible}
        title="password" // Used for accessibility labels
        variant="outline" // Optional: defaults to "outline"
      />
      {isVisible ? "Sensitive content" : "•••••••"}
    </div>
  );
}

Examples

Basic Usage

Examples showing different variants and use cases for the VisibleButton component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div className="flex flex-col gap-8">
  <div className="mx-auto">
    Default Variant
  </div>
  <div className="rounded flex items-center gap-2 border border-gray-6 mx-auto text-center">
    <code className="flex-row px-2 bg-transparent border-none mx-2 overflow-hidden text-ellipsis">
      Content is hidden
    </code>
    <VisibleButton
      className="right-1"
      setIsVisible={bound nn}
      title="Password"
      variant="outline"
    />
  </div>
  <div className="mx-auto">
    Ghost Variant
  </div>
  <div className="rounded flex items-center gap-2 border border-gray-6  mx-auto text-center">
    <code className="flex-2 px-2 bg-transparent border-none overflow-hidden text-ellipsis">
      ••••••••••••••••
    </code>
    <VisibleButton
      className="right-1 focus:ring-0"
      setIsVisible={bound nn}
      title="Key"
      variant="ghost"
    />
  </div>
</div>

Features

• Toggle Functionality: Switches between visible/hidden states with icon changes
• Accessibility: Built-in accessibility with screen reader support
• Dark Mode Support: Consistent appearance in light and dark themes
• Customizable Styling: Extensive styling options through className prop
• Configurable Variants: Supports different button variants
• State Management: Integrates with React state for controlled behavior

Props

Additional props are forwarded to the underlying Button component. See Button component for more details.

Variants

The component accepts all standard Button props.

Structure

The VisibleButton component is a specialized button that:

1. Renders as Button: Uses the base Button component for styling and behavior
2. Icon Management: Switches between Eye and EyeSlash icons based on state
3. State Integration: Integrates with external state management
4. Accessibility: Provides proper ARIA labels and descriptions

Styling

The button features:

• A minimal, circular design for subtle appearance
• Icon-based state indication (Eye/EyeSlash)
• Hover and focus states for better interaction
• Dark mode support with appropriate color schemes
• Responsive sizing (inherits from Button component)
• Customizable through className prop

Custom Styling

You can customize the appearance using the className prop:

<VisibleButton
  isVisible={isVisible}
  setIsVisible={setIsVisible}
  title="API Key"
  variant="ghost"
  className="custom-visible-button"
/>

Accessibility

The component includes comprehensive accessibility features:

• Dynamic ARIA Labels: aria-labels based on the title prop and current state
• Semantic Button: Uses semantic button element with proper ARIA attributes
• Focus Management: Maintains focus states for keyboard navigation
• Tooltip Support: Shows tooltip on hover with current action
• Screen Reader Support: Announces state changes appropriately