Play Button - Keep React
Table of Contents#
- Default Play Button
- Secondary Play Button
- No Border Play Button
- Circle Play Button
- Blur Play Button
- Sizes of Play Button
- API Reference
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
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.
Explore the available props for the play button component
|title||A descriptive title or label for the play button.||string||title|
|type||The type of play button style.|
|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.|
|className||Additional CSS classes to apply to the play button for custom styling.||string||None|
|onClick||On click event Handler||Function||None|