diff --git a/docs/src/pages/components/Link.svx b/docs/src/pages/components/Link.svx index 66792e95..78c21956 100644 --- a/docs/src/pages/components/Link.svx +++ b/docs/src/pages/components/Link.svx @@ -8,17 +8,19 @@ components: ["Link", "OutboundLink"] import Preview from "../../components/Preview.svelte"; +The `Link` component provides styled hyperlinks with various customization options. It supports different sizes, states, and can include icons. The `OutboundLink` variant automatically handles external links with proper security attributes. + ## Default +Create a basic link with the default styling. + Carbon Design System ## Target _blank -If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/). - -You can override the `rel` attribute with a custom value. +For external links, the component automatically adds security attributes. You can override the `rel` attribute if needed. Carbon Design System @@ -26,7 +28,7 @@ You can override the `rel` attribute with a custom value. ## Outbound link -An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`. +Use `OutboundLink` as a convenient alternative for external links. Carbon Design System @@ -34,6 +36,8 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun ## Inline variant +Create links that flow naturally with surrounding text. +
Visit the @@ -43,7 +47,7 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun ## Link with icon -Note that `inline` must be `false` when rendering a link with an icon. +Add icons to links for better visual context. Note that `inline` must be `false` when using icons.
Visit the @@ -52,28 +56,34 @@ Note that `inline` must be `false` when rendering a link with an icon. .
-## Large size +## Size variants + +The component supports different sizes to match your design needs: - Carbon Design System + Large link - -## Small size - +
+ + Default link + +
- Carbon Design System + Small link ## Disabled state -A `disabled` link will render a `p` tag instead of an anchor element. +Disabled links render as plain text while maintaining accessibility. - Carbon Design System + Disabled link ## Visited styles +Show visited state styling for links. + - Carbon Design System + Visited link \ No newline at end of file