# 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='mdi:airplane' fontSize={20} />
</CustomTimelineDot>
<CustomTimelineDot skin='light' color='primary'>
  <Icon icon='mdi:clock-outline' fontSize={20} />
</CustomTimelineDot>
<CustomTimelineDot skin='light' color='warning'>
  <Icon icon='mdi:cart-outline' fontSize={20} />
</CustomTimelineDot>
<CustomTimelineDot skin='light' color='success'>
  <Icon icon='mdi:file-edit-outline' fontSize={20} />
</CustomTimelineDot>

Result:

timeline-dot-skins

# Props

Prop Type Required Description
skin light No Skin of the timeline dot
Last Updated: 5/8/2024, 7:58:27 AM