Installation
import { InlineMessage } from "@octopusdeploy/design-system-components"
Properties
With an Action
The action will render as either a button element or an anchor element (a link) depending on what action you provide. If you provide a href it will render as a anchor, if you provide an onClick event it will render as a button.
The visual styling will not change, it will always look visually like text, it’s only the code underneath that will change. This is done for accessibility and semantics to ensure we are using valid HTML.
As a link:
You should use a link if you are linking to an internal or external website or page, i.e. Navigating to a new page.
action: {
label: "Take action",
href: "/",
},
You can also set it to render as an external link that opens in a new window by setting external to true, this will automatically set the target attribute and related security and tracking attributes.
action: {
label: "Take action",
href: "/",
external: true,
},
As a button:
You should use a button if you want to perform an action on the current page, like opening a drawer or dialog. You can provide the action as follows with your appropriate onClick function. Do not use onClick events to navigate to a new page.
action: {
label: "Take action",
onClick: onClickHandler,
},