Callout

Callout 은 유저가 행동한 결과 값에 따른 정보를 전달 해야할 때 뿐만 아니라 일반적인 추가 정보를 전달 해야 할때 사용하는 컴포넌트 입니다.

<Callout title="수정한 정보는 1분 내로 반영되어 유저들에게 노출됩니다." kind="informative" />

<Callout
  title="수정한 정보는 1분 내로 반영되어 유저들에게 노출됩니다."
  kind="informative"
/>

수정한 정보는 1분 내로 반영되어 유저들에게 노출됩니다.

How to use

import { Callout } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
title(*)	string		Callout 의 제목으로 보여지는 값
contents	string		Callout 의 본문으로 보여지는 값. renderContents 와 함께 사용할 수 없습니다.
renderContents	() => ReactElementChild		Callout 의 본문으로 보여지는 값. content 와 함께 사용할 수 없습니다.
kind	default | informative | error | warning | success	default	Callout 의 종류를 지정합니다.
buttonText	string		Callout 내부에 위치하는 버튼에 등록되는 값
onButtonClick	() => void		버튼이 클릭되었을 경우 실행할 함수

Usage

종류

<VStack spacing={6}> <Callout title="default" contents="기본값으로 사용됩니다." kind="default" /> <Callout title="informative" contents="정보성 내용에 적합합니다." kind="informative" /> <Callout title="error" contents="오류 메시지에 적합합니다." kind="error" /> <Callout title="warning" contents="경고 메시지에 적합합니다." kind="warning" /> <Callout title="success" contents="작업 수행 완료시 적합합니다." kind="success" /> </VStack>

<VStack spacing={6}>
  <Callout
    title="default"
    contents="기본값으로 사용됩니다."
    kind="default"
  />
  <Callout
    title="informative"
    contents="정보성 내용에 적합합니다."
    kind="informative"
  />
  <Callout
    title="error"
    contents="오류 메시지에 적합합니다."
    kind="error"
  />
  <Callout
    title="warning"
    contents="경고 메시지에 적합합니다."
    kind="warning"
  />
  <Callout
    title="success"
    contents="작업 수행 완료시 적합합니다."
    kind="success"
  />
</VStack>

default

기본값으로 사용됩니다.

informative

정보성 내용에 적합합니다.

error

오류 메시지에 적합합니다.

warning

경고 메시지에 적합합니다.

success

작업 수행 완료시 적합합니다.

버튼

Callout 내부에 있는 버튼을 사용하려면 buttonText 와 onButtonClick 을 함께 제공해주어야 합니다.

<Callout title="팝업을 보려면 확인 버튼을 누르세요" buttonText="확인" onButtonClick={() => alert('확인')} />

<Callout
  title="팝업을 보려면 확인 버튼을 누르세요"
  buttonText="확인"
  onButtonClick={() => alert('확인')}
/>

팝업을 보려면 확인 버튼을 누르세요