Franklin Street - Buttons - Atoms - Components

For proper styling, use the button class in addition to one of the many required contextual classes.

Button CSS classes can include:

Colors:

Sizes:

Button Types

Provided by ButtonTypeEnum:

ButtonTypeEnum.Add
ButtonTypeEnum.Base
ButtonTypeEnum.Close
ButtonTypeEnum.Delete
ButtonTypeEnum.Remove
ButtonTypeEnum.Save

ButtonTypeEnum.Base

@Html.ButtonAtom(
    ButtonTypeEnum.Base,
    id: "base-button",
    customClass: "button--white",
    text: "Base Button"
)

Disabled Button

@Html.ButtonAtom(
    ButtonTypeEnum.Base,
    id: "disabled-button",
    customClass: "button--white",
    text: "Disabled Button",
    disabled: true
)

ButtonTypeEnum.Add

@Html.ButtonAtom(
    ButtonTypeEnum.Add,
    id: "add-button"
)

ButtonTypeEnum.Close

@Html.ButtonAtom(
    ButtonTypeEnum.Close,
    id: "close-button"
)

ButtonTypeEnum.Delete

@Html.ButtonAtom(
    ButtonTypeEnum.Delete,
    id: "delete-button"
)

ButtonTypeEnum.Remove

@Html.ButtonAtom(
    ButtonTypeEnum.Remove,
    id: "remove-button"
)

ButtonTypeEnum.Save

@Html.ButtonAtom(
    ButtonTypeEnum.Save,
    id: "save-button"
)