Material Componens React Notched Outline


1,9231710.15.02 years ago3 years agoMinified + gzip package size for @material/react-notched-outline in KB


React Notched Outline

A React version of an MDC Notched Outline.


npm install @material/react-notched-outline



with Sass:

import '@material/react-notched-outline/index.scss';

with CSS:

import '@material/react-notched-outline/dist/notched-outline.css';

Javascript Instantiation

import NotchedOutline from '@material/react-notched-outline';
import FloatingLabel from '@material/react-floating-label';

const MyComponent = () => {
  return (
    <NotchedOutline notch>
      <FloatingLabel float>My Label</FloatingLabel>

Variant with No Notch

import NotchedOutline from '@material/react-notched-outline';

const MyComponent = () => {
  return (
      <label>My Label</label>
      <NotchedOutline />


Prop Name Type Description
className String Classes to be applied to the root element.
notch Boolean Toggles between notched outline and idle outline state.
notchWidth Number Width of the notch in the outline.

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.