diff --git a/src/button/Link.module.css b/src/button/Link.module.css index 710d5a1a6..6248bc407 100644 --- a/src/button/Link.module.css +++ b/src/button/Link.module.css @@ -6,5 +6,8 @@ Please see LICENSE in the repository root for full details. */ .external { + /* By default links will be blue/purple (or whatever the user agent does), but + in our designs we generally want external links to be the same color as the + surrounding text */ color: inherit; } diff --git a/src/button/Link.tsx b/src/button/Link.tsx index 4114bd207..68c4dd136 100644 --- a/src/button/Link.tsx +++ b/src/button/Link.tsx @@ -48,6 +48,7 @@ type Props = Omit< /** * A version of Compound's link component that integrates with our router setup. + * This is only for app-internal links. */ export const Link = forwardRef(function Link( { to, state, ...props }, @@ -57,6 +58,10 @@ export const Link = forwardRef(function Link( return ; }); +/** + * A link to an external web page, made to fit into blocks of text more subtly + * than the normal Compound link component. + */ export const ExternalLink = forwardRef< HTMLAnchorElement, ComponentPropsWithoutRef<"a">