Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

text

v2.6.5arrow_drop_down
v2.6.5
v2.5.5
STATUS
Passing
DOWNLOADS
4,449
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
23 KB
subject
Arbitrary text.
1 contributor
Use text in your project ?
Copied
npm i @bit/grommet.grommet.text
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right

Text

Arbitrary text.

Usage

import { Text } from 'grommet';
<Text />

Properties

a11yTitle

Custom title to be used by screen readers.

string

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

start
center
end
stretch

gridArea

The name of the area to place this inside a parent Grid.

string

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

none
xxsmall
xsmall
small
medium
large
xlarge
{
  bottom: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  horizontal: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  left: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  right: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  top: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string,
  vertical: 
    xxsmall
    xsmall
    small
    medium
    large
    xlarge
    string
}
string

color

A color identifier to use for the text color.

string
{
  dark: string,
  light: string
}

size

The font size and line height are primarily driven by the chosen tag. But, it can be adjusted via this size property. The tag should be set for semantic correctness and accessibility. This size property allows for stylistic adjustments.

xsmall
small
medium
large
xlarge
xxlarge
string

tag

The DOM tag to use for the element. NOTE: This is deprecated in favor of indicating the DOM tag via the ‘as’ property.

string
function

as

The DOM tag or react component to use for the element. Defaults to span.

string
function

textAlign

How to align the text inside the component. Defaults to start.

start
center
end

truncate

Restrict the text to a single line and truncate with ellipsis if it is too long to all fit.

boolean

weight

Font weight

normal
bold
number

Intrinsic element

span

Theme

global.colors.text

The text color used for Text. Expects object | { dark: string, light: string }.

Defaults to

{ dark: '#f8f8f8', light: '#444444' }

text

The possible sizes of the text in terms of its font-size and line-height. Expects object.

Defaults to

{
      xsmall: {
        size: '12px',
        height: '18px',
       },
      small: {
        size: '14px',
        height: '20px',
       },
      medium: {
        size: '18px',
        height: '24px',
      },
      large: {
        size: '22px',
        height: '28px',
      },
      xlarge: {
        size: '26px',
        height: '32px',
      },
      xxlarge: {
        size: '34px',
        height: '40px',
      },
    }

text.extend

Any additional style for Text. Expects string | (props) => {}.

Defaults to

undefined

global.edgeSize

The possible sizes for margin. Expects object.

Defaults to

{
    edgeSize: {
      none: '0px',
      hair: '1px',
      xxsmall: '3px',
      xsmall: '6px',
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
      responsiveBreakpoint: 'small',
    },
  }