BRAID

Tools

Source
Playroom

Guides

Design Workflow
Development Workflow

Foundations

Layout
Tones
Iconography

Layout Components

Box
Card
Column
Columns
ContentBlock
Divider
Hidden
Inline
Stack
Tiles

Content Components

Alert
Badge
Bullet
BulletList
Heading
Loader
Secondary
Strong
Tag
Text

Interaction Components

Actions
Autosuggest
Button
ButtonRenderer
Checkbox
Dropdown
FieldLabel
FieldMessage
OverflowMenu
OverflowMenuItem
MonthPicker
Radio
Textarea
TextField
TextLink
TextLinkRenderer
Toggle

Logic Components

BraidProvider
BraidLoadableProvider
ThemeNameConsumer
useThemeName
useSpace
useColor
BackgroundProvider

All Components

Actions
Alert
Autosuggest
BackgroundProvider
Badge
Box
BraidLoadableProvider
BraidProvider
Bullet
BulletList
Button
ButtonRenderer
Card
Checkbox
Column
Columns
ContentBlock
Divider
Dropdown
FieldLabel
FieldMessage
Heading
Hidden
Inline
Loader
MonthPicker
OverflowMenu
OverflowMenuItem
Radio
Secondary
Stack
Strong
Tag
Text
TextField
TextLink
TextLinkRenderer
Textarea
ThemeNameConsumer
Tiles
Toggle

Secondary

Example
Theme: seekAnz
The word in the middle is secondary text.
Theme: seekBusiness
The word in the middle is secondary text.
Theme: jobsDbRebrand
The word in the middle is secondary text.
Theme: jobsDb
The word in the middle is secondary text.
Theme: jobStreet
The word in the middle is secondary text.
Theme: jobStreetClassic
The word in the middle is secondary text.
Theme: wireframe
The word in the middle is secondary text.
Code:
<Text>
  The word in the
  <Secondary>middle</Secondary>
  is secondary text.
</Text>
Open in Playroom

Required props

children
ReactNode

Optional props

id
string

Further References

View Source
Migration Guide