# Timeline Dot

# Overview

Please visit MUI Timeline Docs (opens new window) for a proper explanation of the TimelineDot component.

TimelineDot component is slightly modified to make it more beautiful and useable. Let's have a glance.

Note

We have only mentioned the extended props here but you can still use the default MUI TimelineDot props.

# Timeline Dot Skins

There is only one skin type of timeline dot: light.

Here is an example of how to use the skin:

import Icon from 'src/@core/components/icon'
import CustomTimelineDot from 'src/@core/components/mui/timeline-dot'

<CustomTimelineDot skin='light' color='error'>
  <Icon icon='tabler:plane-tilt' fontSize={20} />
</CustomTimelineDot>
<CustomTimelineDot skin='light' color='primary'>
  <Icon icon='tabler:clock-hour-4' fontSize={20} />
</CustomTimelineDot>
<CustomTimelineDot skin='light' color='warning'>
  <Icon icon='tabler:shopping-cart' fontSize={20} />
</CustomTimelineDot>
<CustomTimelineDot skin='light' color='success'>
  <Icon icon='tabler:edit' fontSize={20} />
</CustomTimelineDot>

Result:

timeline-dot-skins

# Props

Prop Type Required Description
skin light No Skin of the timeline dot
Last Updated: 3/11/2024, 6:51:36 AM