Scenic.Component.Button (Scenic v0.11.0-beta.0) View Source

Add a button to a graph

A button is a small scene that is pretty much just some text drawn over a rounded rectangle. The button scene contains logic to detect when the button is pressed, tracks it as the pointer moves around, and when it is released.



  • title - a bitstring describing the text to show in the button


If a button press is successful, it sends an event message to the host scene in the form of:

{:click, id}

These messages can be received and handled in your scene via Scenic.Scene.handle_event/3. For example:


@impl Scenic.Scene
def init(_, _opts) do
  graph =
    |> Scenic.Components.button("Sample Button", id: :sample_btn_id, t: {10, 10})

  state = %{}

  {:ok, state, push: graph}

@impl Scenic.Scene
def handle_event({:click, :sample_btn_id}, _from, state) do
  IO.puts("Sample button was clicked!")
  {:cont, event, state}


Buttons honor the following standard styles

  • :hidden - If false the component is rendered. If true, it is skipped. The default is false.
  • :theme - The color set used to draw. See below. The default is :primary

Sendable Styles

Styles can be sent directly to the Button Component by adding a :styles list.

|> button(
  styles: [font_size: 32, text_align: :right]

The following standard styles are supported

  • :font - The default is :roboto
  • :font_size - The default is 20
  • :text_align - The default is :center


Buttons the following options.

  • :width - :auto (default) or pass in a number to set the width of the button
  • :height - :auto (default) or pass in a number to set the height of the button.
  • :radius - pass in a number to set the radius of the button's rounded rectangle. The default is 3

Buttons do not use the inherited :font_size style as they should look consistent regardless of what size the surrounding text is.


Buttons work well with the following predefined themes: :primary, :secondary, :success, :danger, :warning, :info, :text, :light, :dark

To pass in a custom theme, supply a map with at least the following entries:

  • :text - the color of the text in the button
  • :background - the normal background of the button
  • :border - the border of the button
  • :active - the background while the button is pressed


You should add/modify components via the helper functions in Scenic.Components


The following example creates a simple button and positions it on the screen.

|> button("Example", id: :button_id, translate: {20, 20})

The next example makes the same button as before, but colors it as a warning button. See the options list above for more details.

|> button("Example", id: :button_id, translate: {20, 20}, theme: :warning)

The final example changes the text size and alignment

|> button(
  id: :button_id,
  translate: {20, 20},
  theme: :warning,
  styles: [text_size: 32, text_align: :right]

Link to this section Summary


Returns a specification to start this module under a supervisor.

Link to this section Functions

Link to this function

add_to_graph(graph, data, opts \\ [])

View Source

Callback implementation for Scenic.Component.add_to_graph/3.

Returns a specification to start this module under a supervisor.

See Supervisor.