Example from https://react-md.dev/packages/button/demos#outlined-buttons

Button Example - Outlined Buttons

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Button Example - Outlined Buttons</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

.container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  :global .rmd-button {
    margin: 1rem;
  }
}


import type { HTMLAttributes, ReactElement } from "react";
import cn from "classnames";

import styles from "./Container.module.scss";

export default function Container({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLDivElement>): ReactElement {
  return (
    <div {...props} className={cn(styles.container, className)}>
      {children}
    </div>
  );
}


import type { ReactElement } from "react";
import { Button } from "@react-md/button";

import Container from "./Container";

export default function Demo(): ReactElement {
  return (
    <Container>
      <Button id="outlined-button-1" theme="primary" themeType="outline">
        Outlined Button 1
      </Button>
      <Button id="outlined-button-2" theme="secondary" themeType="outline">
        Outlined Button 2
      </Button>
      <Button id="outlined-button-3" theme="warning" themeType="outline">
        Outlined Button 3
      </Button>
      <Button id="outlined-button-4" theme="error" themeType="outline">
        Outlined Button 4
      </Button>
      <Button id="outlined-button-5" theme="clear" themeType="outline">
        Outlined Button 5
      </Button>
      <Button id="outlined-button-6" themeType="outline" disabled>
        Disabled Outlined Button
      </Button>
    </Container>
  );
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
