@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
24 lines (17 loc) • 1.31 kB
Markdown
# MLink
A link is an interactive text element used to navigate between pages, sections, or external resources. It is typically underlined and styled to indicate its clickable nature. Links can be standalone or embedded within text, and they may include icons to reinforce their purpose. They are essential for navigation and content referencing in web and application interfaces.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `iconPosition` | Position of the icon relative to the text. | `"left"` `"right"` | `"left"` |
| `appearance` | Allows to define the link appearance. | `"standard"` `"inverse"` `"accent"` `"secondary"` | `"standard"` |
| `size` | Allows to define the link size. | `"s"` `"m"` | `"s"` |
| `href` | URL for the link (for external links or the `to` prop for `router-link`). | `string` | - |
| `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - |
| `inline` | Specify wether the link is inline. | `boolean` | - |
| `router` | If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router). | `boolean` | - |
## Slots
| Name | Description |
| --- | --- |
| `default` | Use this slot to insert the textual content of the Link. |
| `icon` | Use this slot to insert an icon for the Link. |