Play badge
Thumbnail 위에 배치해 동영상 콘텐츠임을 시각적으로 알려주는 아이콘입니다. 사용자가 동영상을 재생할 수 있도록 버튼 역할을 하여, 이미지와 비디오를 명확하게 구분하고 상호작용을 유도합니다.
비디오 콘텐츠를 표시할 때 사용합니다.
import { PlayBadge } from '@wanteddev/wds';
const Demo = () => {
return (
<PlayBadge />
)
}
export default Demo;
3가지 사이즈를 제공합니다.
- small
- medium (default)
- large
import { PlayBadge, FlexBox } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox flexDirection="column" gap="12px" alignItems="center">
<PlayBadge size="small" />
<PlayBadge size="medium" />
<PlayBadge size="large" />
</FlexBox>
)
}
export default Demo;
alternative 옵션을 사용하면 blur가 적용되지 않는 환경에서도 자연스러운 스타일을 적용할 수 있습니다.
import { PlayBadge, FlexBox } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox flexDirection="column" gap="12px">
<PlayBadge />
<PlayBadge alternative />
</FlexBox>
)
}
export default Demo;
정해진 breakpoint에 따라 아래 옵션을 override 할 수 있습니다.
- size