fix: improve inlinelink target prop api to be more intuitive

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/ratelimit-setup.tsx

@@ -166,7 +166,8 @@ export const RatelimitSetup = () => {
                       This rate limit rule will always be used.{" "}
                       <InlineLink
                         label="Learn more"
-                        target
+                        target="_blank"
+                        rel="noopener noreferrer"
                         href="https://unkey.com/docs/apis/features/ratelimiting/overview#auto-apply-vs-manual-ratelimits"
                       />
                       .

apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx

@@ -141,8 +141,9 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
               : "Enabling this prevents the API from being deleted. This setting can be disabled at any time. "}
             <InlineLink
               label="Learn more"
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://www.unkey.com/docs/security/delete-protection"
-              target={true}
               icon={<ArrowUpRight size="sm-thin" />}
             />
           </p>

apps/dashboard/app/(app)/apis/[apiId]/settings/components/update-ip-whitelist.tsx

@@ -75,8 +75,9 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
             restrict access to trusted sources.{" "}
             <InlineLink
               label="Learn more"
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://www.unkey.com/docs/apis/features/whitelist#ip-whitelisting"
-              target
               icon={<ArrowUpRight size="sm-thin" />}
             />
           </div>

apps/dashboard/app/(app)/authorization/roles/components/upsert-role/components/warning-callout.tsx

@@ -20,8 +20,9 @@ export const RoleWarningCallout = ({ count, type }: RoleWarningCalloutProps) =>
         <span className="font-medium">Warning:</span> This role has {formatNumber(count)} {itemText}{" "}
         assigned. Use the{" "}
         <InlineLink
-          target
           className="underline"
+          target="_blank"
+          rel="noopener noreferrer"
           href="https://www.unkey.com/docs/api-reference/overview"
           label="API"
         />{" "}

apps/engineering/content/design/components/inline-link.example.tsx

@@ -59,7 +59,7 @@ export const InlineLinkWithTarget = () => {
     href="https://unkey.com"
     label="new tab"
     icon={<ExternalLink size={14} />}
-    target
+    target="_blank"
   />
   .
 </p>`}
@@ -70,7 +70,7 @@ export const InlineLinkWithTarget = () => {
           href="https://unkey.com"
           label="new tab"
           icon={<ExternalLink size={14} />}
-          target
+          target="_blank"
         />
         .
       </p>

apps/engineering/content/design/components/inline-link.mdx

@@ -7,7 +7,7 @@ import { InlineLinkBasic, InlineLinkWithIcon, InlineLinkWithTarget, InlineLinkWi
 
 ## InlineLink
 
-The InlineLink component provides a consistent way to create inline links within text content. It supports icons, custom styling, and target attributes.
+The InlineLink component provides a consistent way to create inline links within text content. It supports icons, custom styling, and target attributes. The component extends all standard HTML anchor element attributes for maximum flexibility.
 
 ## Basic Usage
 
@@ -39,19 +39,21 @@ Apply custom styling to the link.
 - Optional icon support
 - Configurable icon position
 - Custom styling support
-- Target attribute for new tab opening
+- Target attribute for new tab opening (defaults to "_blank")
+- Security attributes (rel="noopener noreferrer" by default)
 - Accessible by default
+- Extends all standard HTML anchor attributes
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | href | string | required | The URL the link points to |
-| label | string | required | The text content of the link |
+| label | string | undefined | The text content of the link (optional) |
 | icon | React.ReactNode | undefined | Optional icon to display with the link |
 | iconPosition | "left" \| "right" | "right" | Position of the icon relative to the label |
 | className | string | undefined | Additional CSS classes |
-| target | boolean | undefined | Whether to open the link in a new tab |
+| ...props | React.AnchorHTMLAttributes<HTMLAnchorElement> | - | All standard HTML anchor element attributes |
 
 ## Accessibility
 
@@ -61,3 +63,4 @@ Apply custom styling to the link.
 - Clear focus indicators
 - Semantic HTML structure
 - Descriptive link text
+- Security attributes for external links

internal/ui/src/components/inline-link.tsx

@@ -2,7 +2,7 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
 
-type InlineLinkProps = {
+export interface InlineLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * The URL to link to.
    */
@@ -24,28 +24,17 @@ type InlineLinkProps = {
    * Additional CSS classes to apply to the link.
    */
   className?: string;
-  /**
-   * Whether to open the link in a new tab.
-   */
-  target?: boolean;
-};
+}
 const InlineLink: React.FC<InlineLinkProps> = ({
   className,
   label,
   href,
   icon,
   iconPosition = "right",
-  target,
   ...props
 }) => {
   return (
-    <a
-      href={href}
-      className={cn(className, "underline inline-flex hover:opacity-70")}
-      target={target ? "_blank" : undefined}
-      rel={target ? "noopener noreferrer" : undefined}
-      {...props}
-    >
+    <a href={href} className={cn(className, "underline inline-flex hover:opacity-70")} {...props}>
       <span className="inline-flex gap-x-1 items-center">
         {iconPosition === "left" && icon && <span aria-hidden="true">{icon}</span>}
         {label}