<Actionable
className="
flex items-center justify-center
px-x3 py-x2 rounded-medium outline-0 border-none
font-body-3 font-medium
bg-neutral text-on-neutral hover:bg-neutral/80 hover:cursor-pointer
focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary
"
onClick={() => {}}
>
Action
</Actionable>Actionable automatically renders correct HTML tag if onClick or href is provided. Use as prop to render it as a different tag, for example as a label tag. When integrating with router libraries, you can use render prop to render it as a custom component.
<Actionable render={RouterLink} href="/">Back to homepage</Actionable>