Material-UI Dots

This component gives you animated pagination dots as seen in the Material Design specs and in the quick settings menu of Android N. The dots were extracted from our auto-rotating carousel component.

Installation

yarn add material-ui-dots

Usage

There is only a single Dots component which is to be used in controlled mode. The following example component will display five dots and select a dot when clicking on it.

import * as React from 'react'
import { Dots } from 'material-ui-dots'
import { Box } from '@mui/material';

export const App: React.FC = () => {
  const [index, setIndex] = React.useState<number>(0);

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderRadius: 6,
        pb: 0.5,
        width: 200,
      }}
    >
      <Dots index={index} count={5} onDotClick={(value) => setIndex(value)} />
    </Box>
  );
};

License

The files included in this repository are licensed under the MIT license.