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
Visual
Content
Button type
A button can display a text label with the Apple logo, or just the Apple logo.
Button style
Sets the background color and border of the button
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
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.
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.
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.
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.
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.
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).
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.
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.
Last updated
Was this helpful?