README.md

Filled Icon Button

A Filled Icon Button is an icon in a clickable container. Read more here.

Constructors

new

This function is a native constructor, with verbosity allowing for control over every configurable property at the cost of a less convenient calling.

Parameters

• onClick: () -> () = This function is called on click.
• icon: ImageData
• textColor: Color3
• surfaceColor: Color3
• disabledTextColor: Color3
• disabledSurfaceColor: Color3
• isEnabled: boolean
• elevation: number
• schemeType: Enums.SchemeType
• fontData: FontData
• scale: number

Usage

No Framework

local onClick: () -> () = function() end -- calls function on click
local icon: ImageData = Types.ImageData.new("")
local textColor: Color3 = Color3.new()
local surfaceColor: Color3 = Color3.new()
local disabledTextColor: Color3 = Color3.new()
local disabledSurfaceColor: Color3 = Color3.new()
local isEnabled: boolean = true
local elevation: number = 0
local schemeType: Enums.SchemeType = Enums.SchemeType.Light
local fontData: FontData = Types.FontData.new(Font.fromEnum(Enum.Font.SourceSans), 14)
local scale: number = 1

local filledIconButton = Synthetic.Component.Button.FilledIconButton.Wrapper.new()
filledIconButton.OnClick = onClick
filledIconButton.Icon = icon
filledIconButton.TextColor = textColor
filledIconButton.SurfaceColor = surfaceColor
filledIconButton.DisabledTextColor = disabledTextColor
filledIconButton.DisabledSurfaceColor = disabledSurfaceColor
filledIconButton.IsEnabled = isEnabled
filledIconButton.Elevation = elevation
filledIconButton.SchemeType = schemeType
filledIconButton.FontData = fontData
filledIconButton.Scale = scale

Fusion

local onClickState: Fusion.Value<() -> ()> = Value(function() end) -- calls function on click
local icon: ImageData = Types.ImageData.new("")
local textColorState: Fusion.Value<Color3> = Value(Color3.new())
local surfaceColor: Color3 = Color3.new()
local disabledTextColorState: Fusion.Value<Color3> = Value(Color3.new())
local disabledSurfaceColor: Color3 = Color3.new()
local isEnabledState: Fusion.Value<boolean> = Value(true)
local elevation: number = 0
local schemeTypeState: Fusion.Value<Enums.SchemeType> = Value(Enums.SchemeType.Light)
local fontData: FontData = Types.FontData.new(Font.fromEnum(Enum.Font.SourceSans), 14)
local scaleState: Fusion.Value<number> = Value(1)

local filledIconButton: GuiObject = Synthetic.Component.Button.FilledIconButton.Fusion.new(
	onClickState,
	icon,
	textColorState,
	surfaceColor,
	disabledTextColorState,
	disabledSurfaceColor,
	isEnabledState,
	elevation,
	schemeTypeState,
	fontData,
	scaleState
)

Roact

local filledIconButton = Roact.createElement(Module.Roact.New, {
	onClick = function() end, -- calls function on click
	icon = Types.ImageData.new(""),
	textColor = Color3.new(),
	surfaceColor = Color3.new(),
	disabledTextColor = Color3.new(),
	disabledSurfaceColor = Color3.new(),
	isEnabled = true,
	elevation = 0,
	schemeType = Enums.SchemeType.Light,
	fontData = Types.FontData.new(Font.fromEnum(Enum.Font.SourceSans), 14),
	scale = 1,
})

Roact.mount(filledIconButton, parent)

primary / secondary / tertiary / primaryContainer / secondaryContainer / tertiaryContainer

This function is a style constructor, utilizing the "Style" type to reduce the number of parameters required for implementation.

Parameters

• style: Style
• onClick: () -> () = This function is called on click.
• icon: ImageData
• elevation: number
• isEnabled: boolean

Usage

No Framework

local style: Style = Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7))
local onClick: () -> () = function() end -- calls function on click
local icon: ImageData = Types.ImageData.new("")
local elevation: number = 0
local isEnabled: boolean = true

local filledIconButton = Synthetic.Component.Button.FilledIconButton.Wrapper.primary()
filledIconButton.Style = style
filledIconButton.OnClick = onClick
filledIconButton.Icon = icon
filledIconButton.Elevation = elevation
filledIconButton.IsEnabled = isEnabled

Fusion

local styleState: Fusion.Value<Style> = Value(Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7)))
local onClick: () -> () = function() end -- calls function on click
local iconState: Fusion.Value<ImageData> = Value(Types.ImageData.new(""))
local elevation: number = 0
local isEnabledState: Fusion.Value<boolean> = Value(true)

local filledIconButton: GuiObject = Synthetic.Component.Button.FilledIconButton.Fusion.primary(
	styleState,
	onClick,
	iconState,
	elevation,
	isEnabledState
)

Roact

local filledIconButton = Roact.createElement(Module.Roact.Primary, {
	style = Style.new(1, Enum.Font.SourceSans, "Light", Color3.new(0, 0.4, 0.7)),
	onClick = function() end, -- calls function on click
	icon = Types.ImageData.new(""),
	elevation = 0,
	isEnabled = true,
})

Roact.mount(filledIconButton, parent)