Link | UI components (BETA)
The Link
component renders a clickable hyperlink. Use links to direct users to a web page, another part of the HubSpot app, or use them as buttons.
- Link text: text that describes where the link leads.
- External link icon: included when setting
external
totrue
. and indicates that the link will open in a new tab. Automatically included when the link leads to a page outside of the HubSpot app.
Prop | Type | Description |
---|---|---|
href Required |
Object | Sets the link's URL and open behavior. Contains the following fields:
|
variant |
'primary' (default) | 'light' | 'dark' | 'destructive' |
The color of the link. See the variants section for more information. |
onClick |
() => void |
A function that is invoked when the link is clicked. The function receives no arguments and its return value is ignored. |
preventDefault |
Boolean | When set to true , event.preventDefault() will be invoked before the onClick function is called, preventing automatic navigation to the href URL. |
- Use the default
primary
variant when you want to link to another page or contact record in HubSpot. - Use the
light
variant when you want to include a link on a dark background. - Use the
dark
variant to include a link in an alert. - Use the
destructive
variant when the link results in an action that can't be undone by the user, such as deleting contact property information.
- DO: space out links so that users can tell when they'll be navigation to a different place.
- DO: make link text concise and contextual.
- DO: use the
destructive
variant sparingly and only when the action can't be undone. - DO: always open links to pages outside of the HubSpot app in a new tab (
external: true
). - DON'T: crowd multiple links together.
- DON'T: use the
dark
variant outside of alerts.
Thank you for your feedback, it means a lot to us.
This form is used for documentation feedback only. Learn how to get help with HubSpot.