Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.
import React from 'react' import { Caption } from '../../' const CaptionLight = (props) => { return ( <div> <Caption text="Caption" {...props} /> <Caption size="lg" text="Caption Large" {...props} /> <Caption size="xs" text="Subcaption" {...props} /> </div> ) } export default CaptionLight
import React from 'react' import { Caption } from '../../' const CaptionBlock = (props) => { return ( <div> <Caption {...props}> {'Block'} </Caption> <Caption size="lg" {...props} > {'Large Block'} </Caption> <Caption size="xs" {...props} > {'Subcaption Block'} </Caption> </div> ) } export default CaptionBlock
If the text gets very long when using default or large size, use a different typography style.