Primary action button with focus styling.
Usage
<.button id="confirm" class="w-10">Confirm</.button>Interactive storybook
Components
Explore the built-in Breeze.Blocks component library
Breeze.Blocks
Button
Breeze.Blocks
Checkbox
Breeze.Blocks
Dropdown
Breeze.Blocks
Flash
Breeze.Blocks
Input
Breeze.Blocks
Keybinding Bar
Breeze.Blocks
List
Breeze.Blocks
Markdown
Breeze.Blocks
Modal
Breeze.Blocks
Panel
Breeze.Blocks
Scroll
Breeze.Blocks
Table
Breeze.Blocks
Tabs
Breeze.Blocks
Textarea
Breeze.Blocks
Tree
button.story.exs
checkbox.story.exs
dropdown.story.exs
flash.story.exs
input.story.exs
keybinding-bar.story.exs
list.story.exs
markdown.story.exs
modal.story.exs
panel.story.exs
scroll.story.exs
table.story.exs
tabs.story.exs
textarea.story.exs
tree.story.exs
Click or use the keyboard
Two-state checkbox with mouse and keyboard activation.
Usage
<.checkbox id="mouse" checked={@mouse} br-change="mouse_changed">Mouse</.checkbox>Collapsed dropdown trigger with themed menu styling.
Usage
<.dropdown id="method" selected="POST">...</.dropdown>Overlay flash messages that stack from a screen corner.
Usage
<.flash_group flash={@breeze.flash} />Overlay flash messages that stack from a screen corner.
Usage
<.flash_group flash={@breeze.flash} variant="square" />Overlay flash messages that stack from a screen corner.
Usage
<.flash_group flash={@breeze.flash} variant="rounded" />Single-line input with placeholder and focused styling.
Usage
<.input id="email" input-placeholder="Email" input-value="dev@example.com" />Compact footer hints for the controls active in the current view.
Usage
<.keybinding_bar keybindings={@keybindings} />Keyboard-selectable list with a muted unfocused state.
Usage
<.list id="languages" variant="muted" class="w-full h-8">...</.list>Keyboard-selectable list with an accent-selected state.
Usage
<.list id="languages" variant="accent" class="w-full h-8">...</.list>Scrollable terminal rendering for headings, lists, links, and code.
Usage
<.markdown id="release-notes" content={@content} width={44} />Centered modal container with optional dimmed backdrop.
Usage
<.modal id="confirm" width={32} height={10} dim>...</.modal>Centered modal container without a dimmed backdrop.
Usage
<.modal id="confirm" width={32} height={10}>...</.modal>Bordered surface with a title slot and padded content.
Usage
<.panel id="details" title="Details">...</.panel>Scrollable content region with keyboard and scrollbar support.
Usage
<.scroll id="logs">...</.scroll>Keyboard-selectable data table with fixed columns and scrollable rows.
Usage
<.table id="cities" selected="delhi">...</.table>Underline tabs with live selection and panel content.
Usage
<.tabs id="request-tabs" selected="headers" variant="underline">...</.tabs>Multiline textarea with default and prompt-style variants.
Usage
<.textarea id="composer" textarea-placeholder="Ask anything" textarea-value={@message} />Keyboard-navigable hierarchical data with expandable branches.
Usage
<.tree id="files" nodes={@nodes} selected={@selected} expanded={@expanded} br-change="select_node" />