Checkmark - Twenty — ContextQMD

Represents a successful or completed action.

jsx

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

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

</Tab> <Tab title="Props">

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

</Tab> </Tabs>

Animated Checkmark

Represents a checkmark icon with the added feature of animation.

jsx

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

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

</Tab> <Tab title="Props">

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

</Tab> </Tabs>