Bricks — a Design System for SwiftUI
By: Fabio Staiano
Tags: Native, Xcode, Swiftui, Design System, Framework

4. Components

Apart from colors and typography, core elements of the design system, we’re also providing a huge amount of premade components. This means you can recall not just the appearance of a custom toggle, but a fully working one, in just one line of code. You can even copy/paste the one you’d like from the preview file. And of course, everything is deeply customisable.

Here you’ll find a quick overview of each component, but you can head in each component’s detailed article to know everything about it.

4.1 Buttons

Have you ever seen an interface without buttons? You clearly need some, don’t you think? Well, we’ll give you plenty of them. Choose between fill, outline and ghost, each of it with a different disabled style. Want to add an icon? You can as well.

Buttons section provided in Sketch file

Still not happy with that? Customise it as you want with even more parameters. Or create your very custom style in the Buttons.swift file.

Example of Button usage

Button Groups

Need a row of ratings stars? We’ve got you covered. Button Group offers you the possibility of setting up a row of buttons in your app by calling a single function.

Button Groups section provided in Sketch file

You can choose between 6 preset sizes — giant, large, medium, small and tiny — and 3 preset color styles — primary, basic and outline. Each color style also has two subsets — default and activated. That’s a lot of buttons options! In addition to this, you can set it up with system icon images or with text, both of which get optimally sized to fit the button’s frame.

Example of ButtonGroup usage

And of course, if you want to add your own custom sizes and color sets, our code can be easily extended.

4.2 Checkboxes

Need to quickly allow a multiple selection? Make use of our beautiful, custom checkboxes. Five styles out of the box, each one with on and off status.

Checkboxes section provided in Sketch file

You may need some text next to the checkbox, explaining its purpose, and it’s also super easy. Just recall a native Text element and add a Spacer between it and the checkbox. You’re done!

Example of Checkbox usage

4.3 Radio Buttons

Radio buttons, unlike checkboxes, allows the user to choose just one option in a context. Also here, you got some variants right there in the framework with both states already designed.

Radio section provided in Sketch file

Text label here comes as a default parameter, so you don’t even need to add some extra stuff to achieve your layout.

Example of Radio Buttons usage

4.4 Toggles

When you need to switch between On/Off states, nothing is easier than a Toggle. It’s available in 5 different styles, and it even provides an animation when the user interacts with it.

Toggles section provided in Sketch file

Functionality is in there as well. Just recall the toggleState variable and you’re ready to make the magic happen. And, of course, you can change the checkmark icon in the Toggles.swift file, if you’d like to.

Example of Toggle usage

4.5 Form Elements

Creating forms is a simple put together with Bricks. Just use the elements you need — most functionality is already provided.

Textfields

For textfields, you get the possibility to use them with or without icons. Apply one of our custom styles such as .danger or .warning, or simply skip specifying the style, and Bricks will automatically apply our default styling to the textfield.

TextFields section provided in Sketch file

All textfields offer you style changes on focus and edit, out of the box. If needed, you can pass a function that’s called when the user commits the input.

Example of TextField usage

4.6 Navigations

Almost every single app needs navigation elements, with very few exceptions. Of course we’re not leaving you alone in this!

Navigation section provided in Sketch file

Top Navigation

A fully customisable top bar for your project! Choose the icons you want (also how many you’d want to display) and set some text in it. Et voilà, top navigation is served.

Example of Top Navigation usage

Bottom Navigation

Need a bottom tab bar instead? Here it is. Choose the amount of icons to show, choose some icon and everything magically appears.

Example of Bottom Navigation usage

4.7 Images

Images always have high impact on the user’s experience.

Bricks provide you with 10 preset styles to transform any image into a sleek view with a single line of code. Image size is customisable but we also provide you with avatar styles, to fit your needs without worrying about figuring out the correct padding or size.

Images section provided in Sketch file

To apply Bricks image styles, just type .br after any image and choose one of the available presets.

Example of Image modifiers usage

4.8 Cards

With Bricks, we’re sticking with a really neutral aspect. We don’t want to force you into any style but pushing you into your very own. When it comes to show lot of information, cards are simple and handy.

Cards section provided in Sketch file

You can choose the card aspect you prefer, taking out every element you may not need in your layout. Don’t want to show any image? Just pull it off.