Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
Use "success" and "error" for status. View footer notes for things to avoid.


I am a body kit
I am a body kit (Light)
I am a body kit (Lighter)
I am a body kit (Error)
I am a body kit (Success)


This kit uses default color by default, and can be replaced with colors below:

  • light 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

  • Block

    I am body kit

    Styled b/strong/a tags

    This text is using the <b> tag

    This text is using the <strong> tag

    This text is using the <a> tag

    Playbook styles the b, strong and a tags within the body kit to match Playbook's design system.

    Things to Avoid

    Do not use positive and negative variants with each other. Use Pill Kit to show status if the text is short. Otherwise, use positive and negative variants and use them sparingly.

    UI Samples using Body Kit

    Get the full picture. See how this kit is used in our samples.

    Available Props

    • classname
    • dark
    • margin
    • margin_bottom
    • margin_left
    • margin_right
    • margin_top
    • margin_x
    • margin_y
    • max_width
    • padding
    • padding_bottom
    • padding_left
    • padding_right
    • padding_top
    • padding_x
    • padding_y
    • z_index
    • number_spacing
    • shadow
    • line_height
    • display
    • cursor
    • flex_direction
    • flex_wrap
    • justify_content
    • justify_self
    • align_items
    • align_content
    • align_self
    • flex
    • flex_grow
    • flex_shrink
    • order
    • id
    • data
    • aria
    • children
    • color
    • status
    • tag
    • text
    • highlighting
    • highlighted_text