mui-toolpad icon indicating copy to clipboard operation
mui-toolpad copied to clipboard

Add a Link component

Open Janpot opened this issue 2 years ago • 1 comments

Should at the very least support

  • href
  • text

In the meantime, it can be implemented with a custom component:

import * as React from "react";
import { Link as MUILink } from "@mui/material";
import { createComponent } from "@mui/toolpad-core";

export interface LinkProps {
  value: string;
  href: string;
}

function Link({ value, href }: LinkProps) {
  return (
    <MUILink href={href} target="_blank">
      {value}
    </MUILink>
  );
}

export default createComponent(Link, {
  argTypes: {
    value: {
      typeDef: { type: "string" },
      defaultValue: "",
    },
    href: {
      typeDef: { type: "string" },
      defaultValue: "",
    },
  },
});

One of #78

Janpot avatar Jun 17 '22 21:06 Janpot

In the meantime, it can be implemented with a custom component:

A few notes:

  • If only value is provided, the link would open the current page, it can be quite confusing. Maybe it's better to do nothing. Not sure.
  • We probably want to support links that is button https://mui.com/material-ui/react-link/#accessibility

oliviertassinari avatar Aug 06 '22 17:08 oliviertassinari