Checkmark

Represents a successful or completed action.

Usage
Props

import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};

Extends React.ComponentPropsWithoutRef<'div'> and accepts all the props of a regular div element.

Animated Checkmark

Represents a checkmark icon with the added feature of animation.

Usage
Props

import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};

Props	Type	Description	Default
isAnimating	boolean	Controls whether the checkmark is animating	false
color	string	Color of the checkmark
duration	number	The duration of the animation in seconds	0.5 seconds
size	number	The size of the checkmark	28 pixels

Welcome

Core Concepts

Animated Checkmark

​Animated Checkmark

Animated Checkmark