Links
This page covers incidental links that are not primary navigation, i.e. are not:
- In the sidebar
- In the main nav bar
- The primary link in a navigation page
Links are unstyled by default. For simple text links, add the fun-link class.
Do use links for navigation. For navigation that feels like an action, for example ‘Save’, use a link styled as a button.
Do not use links for actions. Links are only for navigation.
Internal links
Internal links are links that lead to other pages in the Funnel app.
Never open an internal link in a new tab. This is potentially confusing to the user and a function that is already built in to the browser if the user wants it.
Links to external sites
Links to external sites should be decorated with the external-link icon and open in another tab.
Use a link to direct a user to a website outside of Funnel. This is common for external resources, documentation, or third-party services.
Links to help
Links to Funnel help pages should be prefixed with the question-circle icon and
open in another tab.
Buttons styled as link
For actions that involve opening a modal (non-navigational) use fun-button styling to style a quiet button.
Links styled as buttons
For primary actions that involve navigation, use a fun-button with the href property. This will
result in an a element actually being used, but with button styling.
