Katalyst

Appearance

EditableTrigger ​

Reusable trigger button for entering edit mode in inline editing workflows.

Import ​

tsx
import { EditableTrigger } from '@/shared/ui/components/editable/EditableTrigger'

Props ​

EditableTriggerProps ​

PropTypeDefaultDescription
onClick() => voidRequiredCallback when trigger is clicked
childrenReactNodeRequiredContent to display
showEditIconbooleantrueShow edit icon on hover
classNamestring-Additional CSS classes
disabledbooleanfalseWhether trigger is disabled

Features ​

  • Ghost button styling - Looks like inline content, not a button
  • Edit icon on hover - Pencil icon appears for discoverability
  • Keyboard accessible - Enter and Space keys trigger edit mode
  • Focus ring - Clear focus indicator for accessibility
  • Disabled state - Visual feedback when editing is not allowed

Examples ​

Basic Usage ​

tsx
<EditableTrigger onClick={() => startEdit()}>
  <span>{userName}</span>
</EditableTrigger>

With Custom Styling ​

tsx
<EditableTrigger
  onClick={() => startEdit()}
  className="text-lg font-bold"
>
  <h2>{pageTitle}</h2>
</EditableTrigger>

Without Edit Icon ​

tsx
<EditableTrigger
  onClick={() => startEdit()}
  showEditIcon={false}
>
  <span>{value}</span>
</EditableTrigger>

Disabled State ​

tsx
<EditableTrigger
  onClick={() => startEdit()}
  disabled={!canEdit}
>
  <span className="text-muted-foreground">{value}</span>
</EditableTrigger>

With Complex Content ​

tsx
<EditableTrigger onClick={() => startEdit()}>
  <div className="flex items-center gap-2">
    <Avatar src={user.avatar} size="sm" />
    <div>
      <p className="font-medium">{user.name}</p>
      <p className="text-sm text-muted-foreground">{user.role}</p>
    </div>
  </div>
</EditableTrigger>

Styling ​

The component uses the following base classes:

tsx
<Button
  variant="ghost"
  className="group cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary"
>
  {children}
  {showEditIcon && (
    <Edit2 className="h-3 w-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
  )}
</Button>

You can override with the className prop:

tsx
<EditableTrigger
  onClick={startEdit}
  className="hover:bg-accent rounded-md p-2"
>
  {content}
</EditableTrigger>

Accessibility ​

  • Keyboard navigation: Tab to focus, Enter/Space to activate
  • Focus indicator: Clear focus ring
  • ARIA: Inherits button role and semantics
  • Disabled state: Properly communicated to screen readers

See Also ​