Snackbar

Component Status Details

Status component contains a list of checks and completeness that has been tested and owned by each component

Accessibility Standard

We don't use color as the only visual tool to convey information.

Structure & Properties

The component’s structure and properties include relevant options such as variant, style, size, orientation, optional iconography, decorations, selection, error state, etc. The title is the component name that uses the frame base component template. The base component name contains: .Base & "Component Name" if there is more than one. All component properties use the Legion foundation.

Design Implementation Test

We can change all the parts that are connected to the component base. The inside of the base component remains connected to the master component. All variant options are not damaged when we change from one to another. Overriding changes to components will not reset other variants.

Guideline Component

Component's already has component specs documentation.

Status

Completely TestedView Checklist

Resources

View Design View Code

Usage

import ThemeLGN
Copy to clipboardCopied!

Sizes

Medium

let snackBar = LGNSnackBarUIKit(
    size: .medium, // Optional (default)
    description: "Description"
)
Copy to clipboardCopied!

Small

let snackBar = LGNSnackBarUIKit(
    size: .small,
    description: "Description"
)
Copy to clipboardCopied!

Variant

Default

let snackBar = LGNSnackBarUIKit(
    variant: .default,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)),
    withDivider: true,
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Tertiary

let snackBar = LGNSnackBarUIKit(
    variant: .tertiary,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)),
    withDivider: true,
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Warning

let snackBar = LGNSnackBarUIKit(
    variant: .warning,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)),
    withDivider: true,
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Error

let snackBar = LGNSnackBarUIKit(
    variant: .error,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)),
    withDivider: true,
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Information

let snackBar = LGNSnackBarUIKit(
    variant: .information,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)),
    withDivider: true,
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Success

let snackBar = LGNSnackBarUIKit(
    variant: .success,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)),
    withDivider: true,
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Title

let snackBar = LGNSnackBarUIKit(
    title: "Title",
    description: "Description",
)
Copy to clipboardCopied!

Description (Required)

let snackBar = LGNSnackBarUIKit(
    description: "Description"
)
Copy to clipboardCopied!

Left Icon

let snackBar = LGNSnackBarUIKit(
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill")
)
Copy to clipboardCopied!

Avatar

let avatarURL = .imageURL(URL(string: "https://cdn-icons-png.flaticon.com/512/1946/1946431.png")!)
let avatarUIImage = (.image(UIImage(systemName: "xmark") ?? UIImage()))
let avatarInitials = (.initials("Legion Design System"))

let snackBar = LGNSnackBarUIKit(
    description: "Description",
    avatar: avatarInitials
)
Copy to clipboardCopied!

Divider

let snackBar = LGNSnackBarUIKit(
    description: "Description",
    withDivider: true
)
Copy to clipboardCopied!

Action Button

let snackBar = LGNSnackBarUIKit(
    description: "Description",
    actionButtonTitle: "Submit"
)
Copy to clipboardCopied!

Close Button (Default is True)

let snackBar = LGNSnackBarUIKit(
    description: "Description",
    withCloseButton: false
)
Copy to clipboardCopied!

Full Configuration Example

let snackBar = LGNSnackBarUIKit(
    size: .medium,
    title: "Title",
    description: "Description",
    leftIcon: UIImage(systemName: "exclamationmark.circle.fill"),
    avatar: (.initial(initial: "Legion Design System")),
    withDivider: true,
    actionButtonTitle: "Submit",
    withCloseButton: true,
Copy to clipboardCopied!

Tracking the Action or Dismissal

let snackBar = LGNSnackBarUIKit(
    description: "Description",
    onTapAction: {
        print("Action button tapped")
    },
    onDismissed: {
        print("SnackBar dismissed")
    }
)
Copy to clipboardCopied!

Custom

let snackBar = LGNSnackBarUIKit(
    description: "Description"
)

snackBar.show(
    in: self.view,
    position: .bottom, // Set the position (top, center, bottom)
    leadingPadding: 21, // Set padding from the left
    trailingPadding: 21, // Set padding from the right
Copy to clipboardCopied!

Properties