Glyph
Installation
import { Glyph } from "@o/pipeline/experimental/components/glyph";Usage
Ensures consistent, optical, sizing for icons, checkboxes, and more…
- JB
Note
Glyph is pre-configured for some components, such as Checkbox, Button icon slots (icon/iconStart, iconEnd, the collapsible caret, and the pending spinner), and choice-based items (menus, selects, and similar controls via the internal choice layer).
You’ll likely only ever need it to wrap icons or logos.
Wrap an element with Glyph to size it to the standard glyph metric; a 16px frame that centers 14px glyph content.
Layers (200% scale)
- Frame
- Glyph
render
Glyph surfaces the render prop for full HTML control.
In this case, a button.
Overrides
Setting an explicit size-* class on the child overrides the default glyph size for the odd-case where optical alignment needs to be nudged.
Avoid setting a size on the element unless you really need to.