Basic button usage without href prop. Renders as a <button> element with click handler.

Basic link usage with href prop. Renders as an <a> element for internal navigation.

External link usage with automatic security handling.

Component automatically detects external links (href starting with "http" or "//") and applies security attributes:

- If target is not specified, automatically sets target="_blank" to open in new tab - Automatically adds rel="noopener noreferrer" to prevent security vulnerabilities (if rel already exists, appends "noopener noreferrer" to existing value)

This prevents window.opener attacks and ensures safe external navigation.

Disabled state prevents interaction and shows visual feedback. Works for both links and buttons.

Links with icons for better visual hierarchy.

Variants side by side for comparison.