Sign in with Apple button

The Sign up with Apple button is a pre-built element that triggers Apple's sign-in flow when tapped. You can read more about setting up Apple Sign In in the article below:

Article: Sign in with Apple

Note: The Apple Sign-In Button has fewer styling options than other Bubble elements. This is by design: Apple's Human Interface Guidelines specify how the button may appear, and App Review checks it. Bubble exposes the options Apple allows and locks the rest, so a button you can place in the editor is one that passes review. You can read more about this in the article linked above.

Visual

Content

Button type

A button can display a text label with the Apple logo, or just the Apple logo.

The Logo only property setting sets the button at a fixed aspect ratio.

Button style

Sets the background color and border of the button

Setting	Description
White	Shows only the text/logo black on white, no border
White and outline	Shows the text/logo black on white with a black border
Black	Shows the text/logo white on black

Size

The Sign in with Apple Button behaves differently than other elements in that you can set its size, but it is still displayed in fixed aspect ratios, depending on the button type property,

Sets the width and height of the element. These properties depend on the layout configuration of the parent element.

Height

Sets the width/height of the element. The column, row and align layouts have a more flexible way to set element position.

Type	Description	Options
Fixed	Sets the width of the element as a fixed value.	Pixels: sets the width to a fixed pixel value Percentage: sets the width to a percentage of the parent container
Fit	The element’s width and height automatically adjust based on the size of its child elements. To add a mininum and/or maximum value, click the + symbol.	Min: the minimum width/height, defined as a pixel value or percentage of the parent container. Max: the maximum width/height, defined as a pixel value or percentage of the container.
Fill	The element's width and height fills the available space in the parent container. To add a mininum and/or maximum value, click the + symbol.	Min: the minimum width/height, defined as a pixel value or percentage of the parent container. Max: the maximum width/height, defined as a pixel value or percentage of the container.

Parent container has a fixed layout

Width/height

Sets the widht/height of the element. The fixed layout has a more rigid way of setting element size, based on static pixel values.

Type	Description
Fixed	Sets the width of an element as a fixed pixel value.

Layout

Position

Parent layout: Column

In a column layout, a child element's property is restricted to the vertical axis.

Alignment	Description
Left	Elements are aligned to the left edge.
Center	Elements are aligned to the vertical center of the container.
Right	Elements are aligned to the right edge.

Parent layout: Row

In a row layout, a child element's alignment property is restricted to the horizontal axis.

Alignment	Description
Top	Elements are aligned to the top edge of the container
Center	Elements are aligned to the horizontal center of the container.
Bottom	Elements are aligned to the bottom edge of the container.

Parent layout: Align

In an align layout, a child element's property is restricted to one of nine cells in a 3x3 grid. Any element placed within the same cell will overlap.

Alignment	Description
Top-left	Elements are aligned to the top-left corner of the container.
Top-center	Elements are aligned to the top edge and horizontally centered within the container.
Top-right	Elements are aligned to the top-right corner of the container.
Center-left	Elements are vertically centered and aligned to the left edge of the container.
Center	Elements are vertically and horizontally centered within the container.
Center-right	Elements are vertically centered and aligned to the right edge of the container.
Bottom-left	Elements are aligned to the bottom-left corner of the container.
Bottom-center	Elements are aligned to the bottom edge and horizontally centered within the container.
Bottom-right	Elements are aligned to the bottom-right corner of the container.

Parent layout: Fixed

Elements are positioned using fixed X and Y coordinates, defined in pixels.

Order

Sets the order of the element in the element tree hierarchy.

• Make first: Moves the element to the top of the hierarchy within its container

• Move up: Moves the element one position higher

• Move down: Moves the element one position lower

• Make last: Moves the element to the bottom of the hierarchy within its container

Spacing

Padding

Padding is not supported on the Sign in with Apple element.

Margin

Defines the external spacing between an element and surrounding elements.

Margin adds space outside the element’s border. It affects the distance between elements and influences layout positioning.

Appearance

Radius

Sets the roundness of the selected element(s).

How radius is calculated

The value is applied in pixels and determines the radius of the corner’s arc. Larger values create more rounded corners.

The maximum visible roundness depends on the element’s size. If the radius is set to a value greater than half of the element’s width or height, the browser automatically caps it at half of the smallest dimension. For example:

• A square (100 × 100 px) with a radius of 50 px becomes a circle.

• A rectangle (200 × 100 px) with a radius of 50 px becomes a pill shape.

• Setting a radius larger than 50 px in the second example will not increase the curvature further, because 50 px is already half of the element’s height.

Individual radius

To set an individual radius of each of the four corners, click the Individual radius icon.

Interaction

Workflows

Shows the workflows connected to the selected element. Click the + symbol to create a new workflow associated with that element. The list of available events differs based on which element is selected.

Shortcut: To quickly add a workflow to a selected element, press Cmd+K on macOS or Ctrl+K on Windows. The shortcut defaults to the most likely event for that element type.

Visibility

Visible on view load

Enable this to make the element visible by default. This checkbox makes the element visible every time the view loads. Change the visibility of the element based on certain conditions in the Conditional section in the property editor or with a show/hide element action in a workflow.

Collapse when hidden

Enable this to make the element collapse its height and width to 0 pixels when hidden. This allows surrounding elements to automatically shift into the freed space, preventing empty gaps in the layout.

This is commonly used in single-page applications, where elements are shown and hidden dynamically as users navigate, without leaving the page.

Options

Make interactive

Makes the button clickable, allowing you to attach click events and trigger workflows.

Advanced

ID Attribute

A unique identifier assigned to the element. This can be used to reference the element in custom code, such as JavaScript or CSS, using document.getElementById() or CSS selectors.

For this property to be visible, you need to enable Expose the option to add an ID attribute to HTML elements in Settings – Advanced options.