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.

Table of Contents#

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

titleA descriptive title or label for the play button.stringtitle
typeThe type of play button style.
iconThe icon element to be displayed within the play button.ReactNode<Play/>
circleIf true, the play button will be displayed in a circular shape.booleanfalse
sizeThe size of the play button.
classNameAdditional CSS classes to apply to the play button for custom styling.stringNone
onClickOn click event HandlerFunctionNone