Buttons & links
Button
Section titled “Button”Button::make($label) renders a button. Colour it with ->variant() (Primary, Secondary,
Success, Info, Warning, Danger) and shape its emphasis with ->emphasis()
(Solid, Outline, Ghost, Link) — see Variant and Emphasis.
Solid is the default emphasis and reads as primary until you set a variant.
Stack::make()->direction('row')->gap(Gap::Small)->schema([ Button::make('Primary'), Button::make('Secondary')->variant(Variant::Secondary), Button::make('Success')->variant(Variant::Success), Button::make('Info')->variant(Variant::Info), Button::make('Warning')->variant(Variant::Warning), Button::make('Danger')->variant(Variant::Danger), Button::make('Outline')->emphasis(Emphasis::Outline), Button::make('Ghost')->emphasis(Emphasis::Ghost),]);- align:null
- direction:"row"
- float:null
- gap:"sm"
- height:null
- justify:null
- sticky:false
- width:null
- action:null
- buttonType:"button"
- effects:[]
- emphasis:null
- href:null
- icon:null
- label:"Primary"
- method:null
- modal:null
- variant:null
- action:null
- buttonType:"button"
- effects:[]
- emphasis:null
- href:null
- icon:null
- label:"Secondary"
- method:null
- modal:null
- variant:"secondary"
- action:null
- buttonType:"button"
- effects:[]
- emphasis:null
- href:null
- icon:null
- label:"Success"
- method:null
- modal:null
- variant:"success"
- action:null
- buttonType:"button"
- effects:[]
- emphasis:null
- href:null
- icon:null
- label:"Info"
- method:null
- modal:null
- variant:"info"
- action:null
- buttonType:"button"
- effects:[]
- emphasis:null
- href:null
- icon:null
- label:"Warning"
- method:null
- modal:null
- variant:"warning"
- action:null
- buttonType:"button"
- effects:[]
- emphasis:null
- href:null
- icon:null
- label:"Danger"
- method:null
- modal:null
- variant:"danger"
- action:null
- buttonType:"button"
- effects:[]
- emphasis:"outline"
- href:null
- icon:null
- label:"Outline"
- method:null
- modal:null
- variant:null
- action:null
- buttonType:"button"
- effects:[]
- emphasis:"ghost"
- href:null
- icon:null
- label:"Ghost"
- method:null
- modal:null
- variant:null
A button carries exactly one click behavior — ->href(), ->action(), or ->effects() — plus
optional styling:
->href($url)renders it as a link.->action(SomeAction::class)runs a server action on click.->effects(Effects::…)dispatches client-side effects on click with no request to the server, e.g.->effects(Effects::toggleSidebar('app-sidebar')).->submit()makes it a form’s submit control — see Forms.->icon($name)adds a sprite icon before the label.
Badge::make($label) renders the soft tone chip used across the system — the same look
badge columns produce in tables. Color it with ->color(), which takes
any of the 14 named tones or a raw CSS color; unset badges render gray:
Badge::make('Active')->color('green');Badge::make('Beta')->color(Color::purple());Badge::make('Draft');Link::make($label)->href($url) renders a navigational link. It navigates through Inertia by default,
takes an ->icon($name), and supports affixes. Like a button, it can instead trigger an
action or dispatch client effects rather than navigating.
Link::make('Documentation')->href('https://latticephp.com');Segmented control
Section titled “Segmented control”SegmentedControl::make($name, $label?) renders single-select pills that live outside a form and
emit a client event when the selection changes — reach for it for client-side settings like an
appearance switcher, not as a form field (use Choice for that). Give it
->options([...]), an initial ->value(), and ->emits($event) to name the window event dispatched
on change (its detail carries { name, value }).
SegmentedControl::make('appearance', 'Appearance') ->options([ SegmentedControl::option('Light', 'light'), SegmentedControl::option('Dark', 'dark'), SegmentedControl::option('System', 'system'), ]) ->value('light') ->emits('appearance-changed');- emits:"appearance-changed"
- label:"Appearance"
- name:"appearance"
- options:[{"data":null,"label":"Light","value":"light"},{"data":null,"label":"Dark","value":"dark"},{"data":null,"label":"System","value":"system"}]
- value:"light"