11.12.1
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
Caption kit will use light color by default. Other available colors are:
default lighter success error link
These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
import React from 'react' import { Caption } from '../../' const CaptionColors = (props) => { return ( <div> <Caption text="Test colors" {...props} /> <Caption color="success" text="Test colors" {...props} /> <Caption color="error" text="Test colors" {...props} /> <Caption color="link" text="Test colors" {...props} /> </div> ) } export default CaptionColors
If the text gets very long when using default or large size, use a different typography style.