Play Button - Keep React

The Play Button - Rounded component in the Keep React allows you to incorporate a rounded play button into your user interface. It provides a visually appealing and intuitive way to indicate playback or media-related actions. With customizable options for type and size, you can create play buttons that align with your design style.

Default Play Button#

The play button is an essential component of multimedia interfaces, providing a clear and intuitive way for users to start enjoying audiovisual content.

Secondary Play Button#

A "Secondary Play Button" is a variant of the standard play button that is used to initiate playback of multimedia content. The type property provides different styling options. For the secondary play button to match the design you need to add type="outlineGray" property.

No Border Play Button#

A "No Border Play Button" with the type set to "text" provides a variant of the play button that has no visible border. This style is typically used when you want a minimalistic and subtle play button appearance.

Circle Play Button#

A "Circle Play Button" is a style variation of the play button where the button itself is rendered in the shape of a circle. This circular design can draw attention to the play button and create a visually distinct element. When the circle prop is set to true, it indicates that the play button should be displayed as a circle.

Blur Play Button#

A "Blur Play Button" with the type set to outlineGray is a style variation that adds a blurred effect to the play button. This effect can create a sense of depth and motion, making the button appear as if it's slightly out of focus.

Sizes of Play Button#

The "Sizes of Play Button" feature allows you to adjust the dimensions of the play button according to various predefined size options. These sizes help you ensure that the play button's visual presence aligns with your design and provides a consistent user experience.

API Reference#

Explore the available props for the play button component

Property	Description	Type	Default
title	A descriptive title or label for the play button.	string	title
type	The type of play button style.	primary text outlineGray blur	primary
icon	The icon element to be displayed within the play button.	ReactNode	<Play/>
circle	If true, the play button will be displayed in a circular shape.	boolean	false
size	The size of the play button.	xs sm md lg xl 2xl	md
className	Additional CSS classes to apply to the play button for custom styling.	string	None
onClick	On click event Handler	Function	None