Skip to content
Primer/ViewComponents
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

    Site navigation

  • Introduction
    • Getting started
    • Contributing
    • System arguments
    • Linting
    • Migration
    • Component status
  • Components
    • ActionMenu
    • AutoComplete
    • AutoCompleteItem
    • Avatar
    • AvatarStack
    • Banner
    • Blankslate
    • BorderBox
    • Box
    • Breadcrumbs
    • Button
    • ButtonGroup
    • ButtonMarketing
    • ClipboardCopy
    • CloseButton
    • Counter
    • Details
    • Dialog
    • Dropdown
    • Flash
    • Heading
    • HiddenTextExpander
    • IconButton
    • Image
    • ImageCrop
    • Label
    • Layout
    • Link
    • Markdown
    • Menu
    • NavList
    • Octicon
    • OcticonSymbols
    • Overlay
    • Popover
    • ProgressBar
    • RelativeTime
    • SegmentedControl
    • Spinner
    • State
    • Subhead
    • TabContainer
    • TabNav
    • TabPanels
    • Text
    • TextField
    • TimelineItem
    • ToggleSwitch
    • Tooltip
    • Truncate
    • UnderlineNav
    • UnderlinePanels
  • Deprecated Components
    • BlankslateComponent
    • ButtonComponent
    • IconButton
    • LayoutComponent
    • Tooltip
    • Truncate
  • Architecture decisions
    • Developing and publishing client-side behaviours
    • Use Catalyst for client-side behaviours
    • 252. Build component css with ruby code
  • GitHub

On this page

  • Arguments
  • Examples

Text

Use text as a wrapper component that will apply typography styles to the text inside.
  • Beta
  • Not reviewed for accessibility
  • Source
  • Lookbook
On this page
  • Arguments
  • Examples

Text is a wrapper component that will apply typography styles to the text inside.

Arguments

NameTypeDefaultDescription
tagSymbol:span
system_argumentsHashN/ASystem arguments

Examples

Default

Bold Text

Danger Text

<%= render(Primer::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
<%= render(Primer::Beta::Text.new(tag: :p, color: :danger)) { "Danger Text" } %>

Footer

Edit this page on GitHub