Components
A
A themed native anchor with snippets, bindable visibility, and Svelte transitions.
Props
All native anchor attributes and event handlers are forwarded to the HTML a element,
including href, target, rel, download, title, and accessibility attributes.
element becomes null when the link is removed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Link content, including text or nested components. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLAnchorElement | null | null | Bindable reference to the rendered anchor. |
inTransition | TransitionProps | transition | Overrides the opening transition. |
isVisible | boolean | true | Bindable visibility; false removes the link after its outro. |
outTransition | TransitionProps | transition | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variants or theme references such as button.base. |
Default usage
Import A from sveltewind/components. This example shows its default styling in a usable context.
Loading...Provide a destination and link content. The default theme adds an underline and hover and focus colors.
Examples
Theme variants
Every variant available for A in the built-in themes is shown below.
ghost — Apply the ghost variant.
Loading...muted — Apply the muted variant.
Loading...subtle — Apply the subtle variant.
Loading...external — Apply the external variant.
Loading...secondary — Apply the secondary variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change target, rel while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Button
Use button.base to give the link button styling while preserving native link behavior.
Loading...Outline button
Combine the button's base styles with button.variant.outline.
Loading...