Components

Circle

The Circle component provides an easy and customizable way to render circular div elements in React applications. Its flexible properties allow you to adjust the appearance and behavior of the circle based on your specific requirements. By using the Circle component, you can enhance the visual aesthetics and user experience of your application.

Imports

1import { Circle } from 'dd360-ds'

1import Circle from 'dd360-ds/Circle'

Usage

By adjusting the props of the Circle component, you have full control over its background color, dimensions, border style, and more. Whether you need to display icons, profile pictures, or decorative elements, the Circle component provides a simple and intuitive solution.

The code snippet below shows how to use the Circle component:

1import { Circle } from 'dd360-ds'
2
3<Circle>Hey!</Circle>
4

Props:

Colors

With the backgroundColor prop, you can easily specify the desired color for the Circle component. Simply provide a valid CSS color value, such as a hex code, RGB value, or color name, to achieve the desired effect. This flexibility empowers you to create circles that seamlessly blend with the overall color palette of your application.

The Circle component provides the useBackground prop, which allows you to control whether the specified background color should be applied to the circle or not. By default, the useBackground prop is set to true, indicating that the background color specified by the backgroundColor prop will be applied to the circle. Also it offers the disabled prop, which allows you to indicate whether the circular element should appear in a disabled state or not.

1import { Circle, Flex } from 'dd360-ds'
2
3<Flex alignItems='center' gap='8'>
4  <Circle backgroundColor='#f0ed7e'>Hey!</Circle>
5  <Circle backgroundColor='#7df0e4'>Hey!</Circle>
6  <Circle backgroundColor='#61d934'>Hey!</Circle>
7  <Circle backgroundColor='#ff7d40'>Hey!</Circle>
8  <Circle backgroundColor='#ff7d40' useBackground={false}>Hey!</Circle>
9</Flex>
10

Size

The Circle component offers flexibility in defining its size, allowing you to create circles of different dimensions based on your design needs. By adjusting the width and height props, you can easily customize the size of the Circle component to achieve the desired visual effect.

1import { Circle, Flex } from 'dd360-ds'
2
3<Flex alignItems='center' gap='8'>
4  <Circle backgroundColor='#7df0e4' width='100px' height='100px'>100px</Circle>
5  <Circle backgroundColor='#61d934' width='80px' height='80px'>80px</Circle>
6  <Circle backgroundColor='#f0ed7e' width='60px' height='60px'>60px</Circle>
7</Flex>
8

Border

To specify the border style, provide a valid CSS border value to the border prop. This can include properties such as border width, border color, and border style. With this flexibility, you can create circles with solid borders, dashed borders, or even complex border patterns, adding a unique touch to your circular elements.

1import { Circle, Flex } from 'dd360-ds'
2
3<Flex alignItems='center' gap='8'>
4  <Circle backgroundColor='#7df0e4' border='3px solid #aa1213'>Hey!</Circle>
5  <Circle backgroundColor='#61d934' border='2px dotted #ff7d40'>Hey!</Circle>
6  <Circle backgroundColor='#f0ed7e' border='1px dashed #b2b1e8'>Hey!</Circle>
7  <Circle backgroundColor='#ff7d40' border='1px solid #000'>Hey!</Circle>
8</Flex>
9

Custom Item

The Circle component offers the flexibility to add custom content as child elements inside the circle. This feature allows you to personalize the circular element by including text, images, or other React components within it.

1import { Circle } from 'dd360-ds'
2
3<Circle backgroundColor='#ede4e3'>
4  <DynamicHeroIcon icon='PaperAirplaneIcon' className='w-5 h-5 text-blue-500' />
5</Circle>
6

API Reference